Vue 中怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？

在 Vue Router 中定义动态路由需要使用路由的占位符来表示动态部分。动态路由可以通过在路由路径中使用冒号 : 后面跟着参数名称来定义，然后通过 $route.params 来获取传递过来的动态参数。

定义动态路由

在 Vue Router 中定义动态路由的方式如下：

// 定义动态路由
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
    },
  ],
});

上面的例子中，:id 表示一个动态参数，表示用户的ID，它可以是任意值。

获取动态参数

获取传递过来的动态参数可以通过 $route.params 对象来访问：

// 在组件中获取动态参数
export default {
  created() {
    // 获取动态参数
    const userId = this.$route.params.id;
    console.log('User ID:', userId);
  },
};

在组件中可以通过 this.$route.params.id 来获取动态路由中传递过来的参数值。在路由路径中定义了动态参数后，Vue Router 会将这些参数注入到 $route.params 对象中，然后可以在组件中直接访问。