面试题：如何定义 Vue 的动态路由？如何获取传过来的动态参数？

在 Vue 中，动态路由 是一种根据 URL 中的参数动态匹配路由的机制。它允许我们定义带有参数的路由，并在组件中获取这些参数。以下是定义动态路由和获取动态参数的方法：

1. 定义动态路由

在 Vue Router 中，可以通过 : 来定义动态路由参数。动态参数会被解析并传递给组件。

示例

import Vue from 'vue';
import Router from 'vue-router';
import User from './components/User.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/user/:id', // 动态路由，:id 是参数
      component: User,
    },
  ],
});

export default router;

在上面的例子中：

:id 是一个动态参数，表示 URL 中的用户 ID。
当访问 /user/123 时，123 会被解析为 id 参数。

2. 获取动态参数

在组件中，可以通过 this.$route.params 获取动态路由参数。

示例

<template>
  <div>
    <h1>用户详情</h1>
    <p>用户 ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id; // 获取动态参数 id
    },
  },
};
</script>

在上面的例子中：

this.$route.params.id 获取了 URL 中的 id 参数。
当访问 /user/123 时，userId 的值为 123。

3. 响应路由参数的变化

当动态路由参数发生变化时（例如从 /user/123 跳转到 /user/456），组件不会重新创建，而是复用同一个组件实例。为了响应参数的变化，可以通过以下两种方式：

3.1 监听 `$route` 对象

export default {
  watch: {
    '$route.params.id'(newId, oldId) {
      console.log('路由参数变化:', newId, oldId);
      this.fetchUserData(newId); // 根据新参数获取数据
    },
  },
  methods: {
    fetchUserData(userId) {
      // 发起请求获取用户数据
    },
  },
};

3.2 使用 `beforeRouteUpdate` 导航守卫

export default {
  beforeRouteUpdate(to, from, next) {
    const newId = to.params.id;
    console.log('路由参数变化:', newId);
    this.fetchUserData(newId); // 根据新参数获取数据
    next(); // 继续导航
  },
  methods: {
    fetchUserData(userId) {
      // 发起请求获取用户数据
    },
  },
};

4. 多段动态路由

动态路由可以包含多个参数，例如：

const router = new Router({
  routes: [
    {
      path: '/user/:userId/post/:postId', // 多段动态路由
      component: Post,
    },
  ],
});

在组件中，可以通过 this.$route.params 获取所有参数：

export default {
  computed: {
    userId() {
      return this.$route.params.userId;
    },
    postId() {
      return this.$route.params.postId;
    },
  },
};

5. 可选动态参数

可以通过 ? 将动态参数标记为可选：

const router = new Router({
  routes: [
    {
      path: '/user/:userId?', // userId 是可选参数
      component: User,
    },
  ],
});

访问 /user 时，userId 为 undefined。
访问 /user/123 时，userId 为 123。

6. 总结

定义动态路由：使用 : 定义动态参数，例如 /user/:id。
获取动态参数：通过 this.$route.params 获取动态参数。
响应参数变化：通过 watch 监听 $route 或使用 beforeRouteUpdate 导航守卫。
多段动态路由：支持多个动态参数，例如 /user/:userId/post/:postId。
可选参数：使用 ? 将参数标记为可选。

动态路由是 Vue Router 的核心功能之一，适用于需要根据 URL 参数动态渲染内容的场景，如用户详情页、博客文章页等。

THE END