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

在 Vue Router 中定义动态路由可以通过在路由路径中使用参数来实现，然后通过 $route.params 来获取传递过来的值。

定义动态路由：

// 路由配置中定义动态路由
const routes = [
  {
    path: '/user/:id', // 定义动态参数 :id
    component: User,
  },
];

获取传递过来的动态值：

在组件中可以通过 $route.params.id 来获取传递过来的动态值。

<template>
  <div>
    <p>User ID: {{ route.params.id }}</p>
  </div>
</template>

<script>
export default {
  created() {
    // 访问动态路由中传递的参数值
    console.log('User ID:', this.route.params.id);
  },
};
</script>

在定义路由时，使用冒号 : 来标识动态路由参数。在组件内部，可以通过 $route.params 来访问动态路由参数传递的值。这使得路由路径中的参数可以动态获取，方便根据不同的参数值展示不同的内容或进行相应的操作。