前端笔记(10) Vue3 Router 监听路由参数变化

前言

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>