网站图片分辨率尺寸,教你做兼职的网站,wordpress 是免费的吗,手机wap网站建站系统个人简介 #x1f440;个人主页#xff1a; 前端杂货铺 #x1f64b;♂️学习方向#xff1a; 主攻前端方向#xff0c;正逐渐往全干发展 #x1f4c3;个人状态#xff1a; 研发工程师#xff0c;现效力于中国工业软件事业 #x1f680;人生格言#xff1a; 积跬步…个人简介 个人主页 前端杂货铺 ♂️学习方向 主攻前端方向正逐渐往全干发展 个人状态 研发工程师现效力于中国工业软件事业 人生格言 积跬步至千里积小流成江海 推荐学习前端面试宝典 100个小功能 Vue2 Vue3 Vue2/3项目实战 Node.js实战 Three.js 个人推广每篇文章最下方都有加入方式旨在交流学习资源分享快加入进来吧 文章目录 前言route 路由路由的 props 配置replace 属性编程式路由导航重定向 前言
重拾 Vue3查缺补漏、巩固基础。
route 路由
路由的配置放在 ./route/index.ts 文件中
import { createRouter, createWebHistory } from vue-router;import Home from /pages/Home.vue;
import About from /pages/About.vue;
import News from /pages/News.vue;
import Detail from /pages/Detail.vue;// 创建路由器
const router createRouter({history: createWebHistory(), // history 路由模式routes: [{path: /home,component: Home,},{path: /About,component: About,},{name: news,path: /news,component: News,children: [{name: detail,path: detail/:id/:title/:context?,component: Detail,},],},],
});export default router;要想使用路由需要在 main.ts 中添加如下配置把 router 挂在到 App 上
import { createApp } from vue;
import App from ./App.vue;
import router from ./router;const app createApp(App);app.use(router);
app.mount(#app);下面我们创建一套路由规则点击 首页 / 新闻 / 关于 跳转到相应的页面基于 新闻 页面再进行 点击新闻显示相应的内容即路由的嵌套
下面是 App.vue 组件的代码
通过 to 来跳转到指定路由可以使用 path 或 namepath 带 /name 不带RouterView 是路由内容的显示区域将来会显示 首页 / 新闻 / 关于 的相关内容
templatedivh2路由Test/h2divRouterLink to/home首页 /RouterLinkRouterLink :to{ name: news }新闻 /RouterLinkRouterLink :to{ path: /about }关于/RouterLink/divdiv classshow-areaRouterView //div/div
/templatescript langts setup
import { RouterView } from vue-router;
/scriptstyle scoped
.show-area {margin-top: 20px;height: 200px;border: 1px solid black;
}
/style下面是 Home.vue 组件的相关代码
templatediv主页 | Home/div
/templatescript setup langts/script下面是 About.vue 组件的相关代码
templatediv关于这里是前端杂货铺.../div
/templatescript setup langts/script下面是 News.vue 组件的相关代码使用了四种方法进行传参
使用 params 传参时不能使用 path只能使用 name在路由配置中也需要进行占位参数不能传递对象或数组
templatedivulli v-fornews in newsList :keynews.id!-- 1、使用拼接的方式传递参数 --!-- RouterLink:to/news/detail?id${news.id}title${news.title}context${news.context}{{ news.title }}/RouterLink --!-- 2、query参数 --!-- RouterLink:to{name: detail,query: {id: news.id,title: news.title,context: news.context,},}{{ news.title }}/RouterLink --!-- 3、这种编写方式需要 ./router/index.ts 中做配合path: detail/:id/:title/:context?说明? 表示可传可不传 --!-- RouterLink:to/news/detail/${news.id}/${news.title}/${news.context}{{ news.title }}/RouterLink --!-- 4、params参数 --RouterLink:to{name: detail,params: {id: news.id,title: news.title,context: news.context,},}{{ news.title }}/RouterLink/li/uldivRouterView //div/div
/templatescript setup langts
import { reactive } from vue;
import { RouterView } from vue-router;// title 代表新闻标题context 代表新闻内容
let newsList reactive([{ id: 1, title: 震惊长安第一拳, context: 是裴擒虎 },{ id: 2, title: 什么都吃就是不吃兔子, context: 是老猪 },{id: 3,title: 收藏了视频就要对它负责这是真男人的勋章,context: 是程咬金,},
]);
/script下面是 Detail.vue 组件的相关代码用于显示新闻的内容
templateul!-- li{{ query.id }}/lili{{ query.title }}/lili{{ query.context }}/li --li{{ params.id }}/lili{{ params.title }}/lili{{ params.context }}/li/ul
/templatescript setup langts
import { toRefs } from vue;
import { useRoute } from vue-router;
const route useRoute();// query 传参的接收方式
// const { query } toRefs(route);// params 传参的接收方式
const { params } toRefs(route);
/script以下是相关显示效果 路由的 props 配置
作用是为了让路由组件更方便的收到参数可以将路由参数作为 props 传给组件
修改 ./router/index.ts 组件的 news 路由相关代码 {name: news,path: /news,component: News,children: [{name: detail,// path: detail/:id/:title/:context?, // 使用 params 传参时配置path: detail,component: Detail,// 将路由收到的所有 params 参数作为 props 传给路由组件// props: true,// 自己决定将什么作为 props 给路由组件props(route) {return route.query;},},],},修改 Detail.vue 组件的相关代码
templateul!-- li{{ query.id }}/lili{{ query.title }}/lili{{ query.context }}/li --!-- li{{ params.id }}/lili{{ params.title }}/lili{{ params.context }}/li --li{{ id }}/lili{{ title }}/lili{{ context }}/li/ul
/templatescript setup langts
import { toRefs } from vue;
import { useRoute } from vue-router;
const route useRoute();// query 传参的接收方式
// const { query } toRefs(route);// params 传参的接收方式
// const { params } toRefs(route);defineProps([id, title, context]);
/scriptreplace 属性
replace 用于控制路由跳转时操作浏览器历史记录的模式
push模式追加历史记录默认replace模式替换当前记录
写法很简单直接在 RouterLink 标签中添加 replace 即可
RouterLink replace ...xxx/RouterLink编程式路由导航
除了使用 创建 a 标签来定义导航链接我们还可以借助 router 的实例方法通过编写代码来实现
接下来我们修改 Detail.vue 组件的相关代码实现通过点击按钮的方式实现路由的跳转
templatedivulli v-fornews in newsList :keynews.idbutton clickshowNewsDetails(news)查看新闻详情/button!-- params参数 --RouterLink:to{name: detail,params: {id: news.id,title: news.title,context: news.context,},}{{ news.title }}/RouterLink/li/uldivRouterView //div/div
/templatescript setup langts
import { reactive } from vue;
import { useRouter, RouterView } from vue-router;// title 代表新闻标题context 代表新闻内容
let newsList reactive([{ id: 1, title: 震惊长安第一拳, context: 是裴擒虎 },{ id: 2, title: 什么都吃就是不吃兔子, context: 是老猪 },{id: 3,title: 收藏了视频就要对它负责这是真男人的勋章,context: 是程咬金,},
]);const router new useRouter();interface NewsInter {id: string;title: string;context: string;
}function showNewsDetails(news: NewsInter) {router.push({name: detail,params: {id: news.id,title: news.title,context: news.context,},});
}
/script重定向
当网站打开时默认指定一个路由地址。如下 项目启动打开时默认重定向到 /home 路由 {path: /,redirect: /home,},参考资料 https://www.bilibili.com/video/BV1Za4y1r7KE?spm_id_from333.788.videopod.episodesvd_sourcef839085517d2b7548b2939bfe214d466p42
