怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在 Vue.js 中，Vue Router 用于构建单页应用（SPA）的路由系统。动态路由允许你为路由路径定义一些参数，这样你可以根据这些参数动态地加载不同的组件或数据。

定义动态路由

在 Vue Router 中，你可以在路由路径中使用冒号（:）来定义动态参数。例如，如果你有一个用户详情页面，并且你想通过用户的 ID 来动态地加载不同的用户数据，你可以这样定义路由：

const routes = [
  {
    path: '/user/:userId', // 使用冒号定义动态参数
    component: UserDetail,
  },
  // 其他路由...
];

在这个例子中，:userId 是一个动态参数。当用户访问 /user/1、/user/2 等不同的路径时，userId 的值会相应地改变。

获取传过来的动态参数

在 Vue 组件中，你可以通过 $route.params 对象来获取动态参数的值。例如，在 UserDetail 组件中，你可以这样获取 userId：

export default {
  created() {
    const userId = this.$route.params.userId; // 获取动态参数的值
    // 使用 userId 来加载用户数据或其他操作...
  },
  // 其他选项...
};

在 created 生命周期钩子中，你可以通过 this.$route.params.userId 来获取动态参数 userId 的值。然后，你可以使用这个值来加载用户数据或执行其他相关的操作。

注意，$route 是 Vue Router 注入到每个组件中的对象，它包含了当前路由的信息，包括路径、参数、查询字符串等。你可以通过 $route 对象来访问这些信息。