简记Vue3（四）—— 路由

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

前言

重拾 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 组件的代码

1. 通过 to 来跳转到指定路由，可以使用 path 或 name（path 带 /，name 不带）
2. RouterView 是路由内容的显示区域，将来会显示 首页 / 新闻 / 关于 的相关内容

<template><div><h2>路由Test</h2><div><RouterLink to="/home">首页 </RouterLink><RouterLink :to="{ name: 'news' }">新闻 </RouterLink><RouterLink :to="{ path: '/about' }">关于</RouterLink></div><div class="show-area"><RouterView /></div></div>
</template><script lang="ts" setup>
import { RouterView } from "vue-router";
</script><style scoped>
.show-area {margin-top: 20px;height: 200px;border: 1px solid black;
}
</style>

下面是 Home.vue 组件的相关代码

<template><div>主页 | Home</div>
</template><script setup lang="ts"></script>

下面是 About.vue 组件的相关代码

<template><div>关于：这里是前端杂货铺...</div>
</template><script setup lang="ts"></script>

下面是 News.vue 组件的相关代码，使用了四种方法进行传参

使用 params 传参时不能使用 path，只能使用 name；在路由配置中也需要进行占位；参数不能传递对象或数组

<template><div><ul><li v-for="news in newsList" :key="news.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></ul><div><RouterView /></div></div>
</template><script setup lang="ts">
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 组件的相关代码，用于显示新闻的内容

<template><ul><!-- <li>{{ query.id }}</li><li>{{ query.title }}</li><li>{{ query.context }}</li> --><li>{{ params.id }}</li><li>{{ params.title }}</li><li>{{ params.context }}</li></ul>
</template><script setup lang="ts">
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 组件的相关代码

<template><ul><!-- <li>{{ query.id }}</li><li>{{ query.title }}</li><li>{{ query.context }}</li> --><!-- <li>{{ params.id }}</li><li>{{ params.title }}</li><li>{{ params.context }}</li> --><li>{{ id }}</li><li>{{ title }}</li><li>{{ context }}</li></ul>
</template><script setup lang="ts">
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"]);
</script>

---

replace 属性

replace 用于控制路由跳转时操作浏览器历史记录的模式

• push模式：追加历史记录（默认）
• replace模式：替换当前记录

写法很简单，直接在 RouterLink 标签中添加 replace 即可

<RouterLink replace ...>xxx</RouterLink>

---

编程式路由导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现

接下来，我们修改 Detail.vue 组件的相关代码，实现通过点击按钮的方式实现路由的跳转

<template><div><ul><li v-for="news in newsList" :key="news.id"><button @click="showNewsDetails(news)">查看新闻详情</button><!-- params参数 --><RouterLink:to="{name: 'detail',params: {id: news.id,title: news.title,context: news.context,},}">{{ news.title }}</RouterLink></li></ul><div><RouterView /></div></div>
</template><script setup lang="ts">
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_from=333.788.videopod.episodes&vd_source=f839085517d2b7548b2939bfe214d466&p=42

---