前言
Vue Router是开发Vue项目的必不可少的工具，也是极为重要的学习要点。
本篇介绍下Vue Router的基础使用和如何监听路由参数变化。
Vue Router入门
1 安装Router
安装Vue Router非常方便，只需执行一个命令，如果还不知道怎么搭建Vue项目框架，可以参考我之前的博客：前端笔记(8) Vue3+Vite 搭建项目 配置路径别名@
//npm
npm install vue-router@4
//yarn
yarn add vue-router@4
2 创建测试页面
- 在src/views目录下，创建几个vue单文件组件，用来后面的测试。
About.vue文件：
<template>
<p>我是About页面</p>
</template>
<script setup lang="ts">
</script>
Home.vue文件：
<template>
<p>我是Home页面</p>
</template>
<script setup lang="ts">
</script>
3 添加路由标签
在src目录下面的那个App.vue文件添加2个路由标签
App.vue文件：
<template>
<p>
<router-link to="/about" active-class="active"> 【about】 </router-link>
<router-link to="/home" active-class="active"> 【home】 </router-link>
</p>
<!-- 路由出口，路由匹配到的组件将渲染在这里 -->
<router-view />
</template>
<script setup lang="ts">
</script>
<style scoped>
.active {
color: red;
}
</style>
页面显示效果如下：
<router-link>通过to来指定链接，将呈现一个带有正确href属性的<a>标签<router-view />是路由出口，路由匹配到的组件将渲染在这里
4 配置Router文件
- 在src目录下新建router目录，然后在router目录里创建index.ts文件
- 这里指定根路径/也跳转到/home
import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
export const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
component: () => import('@/views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes: routes as RouteRecordRaw[]
})
export default router
5 配置main.ts文件
- 在main.ts中引入上面创建的路由器配置文件
- 然后app.use(router)
6 验证页面跳转效果
获取路由参数
很多时候，我们的页面是需要接收参数的，比如下面创建一个用户页面User.vue，它接收一个参数id
1 创建用户页面
User.vue文件：
<template>
<p>
userId：{{$route.params.id}}
userId：{{userId}}
</p>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {useRoute} from 'vue-router'
const route = useRoute()
let userId = ref<string | string[]>();
userId.value = route.params.id
</script>
2 添加2个链接
在App.vue文件里继续添加2个跳转链接
<router-link to="/user/1" active-class="active"> 【user/1】 </router-link>
<router-link to="/user/2" active-class="active"> 【user/2】 </router-link>
3 路由器配置文件添加路由配置
import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
export const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
component: () => import('@/views/About.vue')
}
,
{
path: '/user/:id',
component: () => import('@/views/User.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes: routes as RouteRecordRaw[]
})
export default router
4 查看页面演示效果
如上图显示，第二个userId并没有跟着变化，因为用户从 /user/1 导航到 /user/2 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
解决上面的问题主要有2种方法：
- 用watch()监听路由route的变化
- 用beforeRouteUpdate导航守卫
方法1：用watch()监听
<template>
<p>
userId：{{$route.params.id}}
userId：{{userId}}
</p>
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
import {useRoute, onBeforeRouteUpdate} from 'vue-router'
const route = useRoute()
let userId = ref<string | string[]>();
userId.value = route.params.id
watch(
() => route.params,
(newValue, oldValue) => {
console.log(newValue)
console.log(oldValue)
userId.value = newValue.id
},
{ immediate: true }
)
</script>
方法2：用beforeRouteUpdate导航守卫
<template>
<p>
userId：{{$route.params.id}}
userId：{{userId}}
</p>
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
import {useRoute, onBeforeRouteUpdate} from 'vue-router'
const route = useRoute()
let userId = ref<string | string[]>();
userId.value = route.params.id
onBeforeRouteUpdate((to: any) => {
console.log(to.params.id);
userId.value = to.params.id
})
</script>
