vue动态路由传参的参数值是变量

在Vue.js中，动态路由通常是用来处理URL路径中含有可变部分的情况，比如我们想要创建一个用户列表页面，其URL可能是`/users/:userId`，这里的`:userId`就是动态参数，它会匹配实际请求中的一个变量值。

当你需要将一个变量值作为动态路由的参数传递时，可以在路由配置里这样写：

// 使用vue-router的动态路由语法
const routes = [
  {
    path: '/users/:userId',
    name: 'UserDetail',
    component: UserDetailComponent,
    // 这里可以访问到动态参数的值
    props: true, // 配置允许props传递给组件
    // 在组件内部，通过this.$route.params获取参数
    data() {
      return { userId: this.$route.params.userId };
    }
  }
];

然后，在组件的`created()`或`beforeRouteEnter`钩子里，你可以获取并使用这个变量值。例如：

export default {
  created() {
    console.log('User Detail for user with id:', this.userId);
  },
  // ...
}