【愚公系列】《循序渐进Vue.js 3.x前端开发实践》056-Vue Router的带参数的动态路由

🚀前言

在现代前端开发中，构建高效、灵活的单页面应用（SPA）是许多开发者的目标。而路由管理作为 SPA 的核心功能之一，直接关系到用户体验和应用的可维护性。Vue Router 作为 Vue.js 的官方路由解决方案，提供了强大的路由功能，尤其是动态路由的支持，使得我们能够根据不同的需求灵活处理页面的展示。

本文将重点介绍 Vue Router 中的动态路由及其参数传递的使用方法。我们将从动态路由的基本概念开始，逐步深入，探讨如何在路由中设置参数、如何在组件中接收这些参数，以及如何利用这些参数实现丰富的页面交互效果。通过实例演示，帮助大家更好地理解动态路由的实际应用场景。

🚀一、Vue Router的带参数的动态路由

🔎1.路由参数匹配

在Vue Router中，我们可以通过带有动态参数的路由来根据不同的参数渲染相同的组件。例如，如果我们需要展示一个用户中心页面，可以通过路由参数来根据不同的用户信息渲染不同的内容。

示例：用户中心

假设我们需要创建一个用户中心，通过路由的动态参数来显示不同的用户信息（如用户名和用户ID）。我们首先定义一个简单的 UserDemo 组件：

UserDemo.vue

<template>
  <h1>姓名: {{ $route.params.username }}</h1>
  <h2>id: {{ $route.params.id }}</h2>
</template>

在上面的代码中，我们使用 $route.params 来获取当前路由的动态参数 username 和 id。

接下来，我们在 main.js 中配置路由，并使用动态路由参数：

main.js

import { createApp } from 'vue';
import App from './App.vue';
import UserDemo from './components/UserDemo.vue';
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user/:username/:id',  // 动态路由
    component: UserDemo,
    //props: true, // 将 route.params 作为 props 传递给组件
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

createApp(App).use(router).mount('#app');

🦋1.1 路由参数匹配

1. 动态参数：在路由路径中，使用 :param 的方式定义动态参数。例如 /user/:username/:id。
2. 访问路由参数：在组件内通过 this.$route.params 或 useRoute() 来访问路由参数。

在浏览器中访问 http://localhost:5173/#/user/小王/8888，就会显示 小王 和 8888，这两个参数分别代表用户名和用户ID。

🦋1.2 路由组件复用

当路由参数发生变化时，Vue 会复用当前的组件，而不是销毁并重新创建组件。这会导致生命周期钩子不会被再次触发，因此，如果需要通过路由参数请求数据，可以使用导航守卫来处理。

使用 onBeforeRouteUpdate 监听路由变化

为了确保在路由参数变化时重新请求数据，我们可以在组件中使用 onBeforeRouteUpdate 来监听路由变化：

UserDemo.vue

<script setup>
import { onBeforeRouteUpdate, useRoute } from 'vue-router';

const route = useRoute();

onBeforeRouteUpdate((to, from) => {
  alert(`组件加载，请求数据。路由参数为：name: ${to.params.username}, id: ${to.params.id}`);
  console.log(to, from);
});
</script>

<template>
  <h1>姓名: {{ $route.params.username }}</h1>
  <h2>id: {{ $route.params.id }}</h2>
</template>

每当路由参数发生变化时，onBeforeRouteUpdate 会被触发，从而调用数据请求逻辑。

🔎2.路由参数的正则匹配

Vue Router 允许我们在定义路由时，使用正则表达式来对参数进行匹配。这样，我们就可以根据参数类型来决定匹配哪一个路由组件。

示例：根据参数类型匹配路由

假设我们需要区分用户中心页面和用户设置页面。我们可以使用正则表达式来匹配参数类型，例如，如果参数 id 是数字，就匹配到用户设置页面：

const routes = [
  { path: '/user/:username', component: UserDemo },
  { path: '/user/:id(\\d+)', component: UserSetting }
];

在上面的代码中，/user/:id(\\d+) 路径将只匹配数字类型的 id，而 /user/:username 路径将匹配字符串类型的 username。

🦋2.1 使用正则表达式创建多级参数

你还可以使用正则表达式来创建多级路径的动态路由，例如：

{ path: '/category/:cat*', component: CategoryDemo }

这种路由配置会将 /category/一级/二级/三级 路径匹配到 CategoryDemo 组件，并将参数 cat 转换为一个数组 ['一级', '二级', '三级']。

🦋2.2 可选参数

如果路由的某个参数是可选的，你可以在路由路径中使用 ? 来标记该参数为可选。例如，以下路径中的 username 参数是可选的：

{ path: '/user/:username?', component: User }

🔎3.路由嵌套

当页面中有多个子路由时，Vue Router 提供了嵌套路由的支持。假设用户中心页面中还包含了一个好友列表，我们可以将好友列表部分作为子路由来定义。

示例：嵌套路由

首先，我们定义一个 FriendsDemo 组件来展示好友列表：

FriendsDemo.vue

<template>
  <h1>好友列表</h1>
  <h2>好友人数: {{ $route.params.count }}</h2>
</template>

然后，在 UserDemo.vue 组件中定义嵌套路由：

UserDemo.vue

<template>
  <h1>用户中心</h1>
  <router-view></router-view> <!-- 渲染子路由 -->
</template>

<script setup>
import { defineComponent } from 'vue';
</script>

最后，修改路由配置，将好友列表设置为子路由：

main.js

import FriendsDemo from './components/FriendsDemo.vue';

const routes = [
  {
    path: '/user/:username',
    component: UserDemo,
    children: [
      {
        path: 'friends/:count',
        component: FriendsDemo
      }
    ]
  }
];

在上面的例子中，FriendsDemo 组件是 UserDemo 的子路由。通过 <router-view></router-view>，我们可以在用户中心页面中嵌套展示好友列表。

🔎4.总结

• 动态路由参数：通过 :param 在路由路径中定义动态参数，可以在组件中通过 $route.params 获取这些参数。
• 导航守卫：使用 onBeforeRouteUpdate 来监听路由变化，从而实现每次路由参数变化时重新加载数据。
• 正则匹配：使用正则表达式对路由参数进行匹配，确保不同类型的参数路由能够匹配到正确的组件。
• 嵌套路由：通过嵌套路由技术，将子组件嵌入父组件中，实现更加灵活和复杂的页面结构。

这些技术在开发大型应用时非常有用，能够帮助我们更好地管理和展示不同的页面和数据。