简记Vue3（四）—— 路由
个人简介
👀个人主页： 前端杂货铺
🙋♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨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 或 name（path带/，name 不带） - 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
