Vue 3 + Vue Router 实现动态路由导航

Vue.js 是一个流行的前端框架，以其组件化和灵活性而闻名。在实际开发中，尤其是在复杂的单页面应用（SPA）中，动态路由的一部分非常重要。Vue Router 是 Vue.js 官方的路由管理器，能够轻松实现动态路由导航。

1. 动态路由的概念

动态路由对于需要根据后端数据变化而改变的路由非常有用，例如：用户资料、产品详情等。在 Vue Router 中，我们可以使用 routes 配置来定义静态路由，但在某些情况下，我们需要动态地生成这些路由。

2. 安装和设置

首先，我们需要安装 Vue 3 和 Vue Router。你可以使用以下命令创建一个新的 Vue 3 项目，并引入 Vue Router：

vue create my-project
cd my-project
vue add router

在选择 "Use history mode for router?" 时，可以根据需要选择 Yes 或 No。

3. 基础项目结构

在项目中，我们会看到一个 src/router/index.js 文件，其中可能已经有一些初始的路由配置。下面是一个示例的基础路由配置：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

4. 动态路由的实现

假设我们有一个 User 的动态路由，根据用户 ID 来加载不同的用户资料。我们需要在 router/index.js 中添加动态路由配置。

4.1 创建用户视图

首先，我们创建一个 User.vue 组件来展示用户资料：

<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>

<script>
export default {
  props: ['userId'],
};
</script>

4.2 更新路由配置

接下来，我们在 routes 数组中添加动态路由：

const routes = [
  // ... 之前的路由
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue'),
    props: true, // 允许将路由参数作为组件的 props 传递
  },
];

这里我们使用 :id 定义了动态路由参数，当访问如 /user/123 时，id 将会被设置为 123。

4.3 在其他组件中导航到动态路由

我们可以使用 <router-link> 来导航到动态路由，或者使用编程式导航。

<template>
  <div>
    <router-link :to="{ name: 'User', params: { id: 123 } }">去用户 123 的主页</router-link>
  </div>
</template>

也可以在方法中进行编程式导航：

this.$router.push({ name: 'User', params: { id: 123 } });

4.4 获取路由参数

在 User.vue 组件中，我们可以通过 props 属性接收路由参数：

<script>
export default {
  props: ['userId'],
  mounted() {
    console.log('当前用户 ID:', this.userId);
    // 在这里可以用 userId 请求用户数据
  },
};
</script>

5. 总结

通过上述步骤，我们实现了 Vue 3 + Vue Router 的动态路由导航。动态路由不仅能够提高用户体验，还能让我们的应用更加灵活。借助 Vue Router 的强大功能，我们可以轻松地在应用中实现复杂的路由逻辑。在实际开发中，动态路由的使用场景非常广泛，比如电商网站的产品详情页、用户中心等。希望这篇文章能帮助你更好地理解和应用 Vue Router 的动态路由功能。