Vue 路由传参：详解三种方式及示例

在 Vue 中，可以通过路由传参来将数据传递给目标组件。有以下几种方式可以实现路由传参：\n\n1. 使用动态路由参数：\n 在定义路由时，可以在路由路径中使用冒号（:）来定义动态参数，然后在目标组件中通过$route.params来获取传递的参数。例如：\n javascript\n // 定义路由\n const router = new VueRouter({\n routes: [\n {\n path: '/user/:id',\n component: User\n }\n ]\n })\n\n // 目标组件\n const User = {\n template: '<div>User {{ $route.params.id }}</div>'\n }\n \n\n2. 使用查询参数：\n 在定义路由时，可以使用查询参数来传递参数。在目标组件中，可以通过$route.query来获取传递的参数。例如：\n javascript\n // 定义路由\n const router = new VueRouter({\n routes: [\n {\n path: '/user',\n component: User\n }\n ]\n })\n\n // 目标组件\n const User = {\n template: '<div>User {{ $route.query.id }}</div>'\n }\n \n\n3. 使用props传参：\n 在定义路由时，可以使用props来传递参数。需要将props设置为true，并在目标组件中声明接收参数的props。例如：\n javascript\n // 定义路由\n const router = new VueRouter({\n routes: [\n {\n path: '/user',\n component: User,\n props: true\n }\n ]\n })\n\n // 目标组件\n const User = {\n props: ['id'],\n template: '<div>User {{ id }}</div>'\n }\n \n\n以上是几种常用的路由传参方式，可以根据具体的需求选择适合的方式来传递参数。