vue3项目路由传参

在Vue3项目中，路由传参可以通过不同的方式进行设置。以下是常见的两种方式：

1. **查询参数（query）**[^1]:

   // 在路由配置中添加动态路径参数
   { path: '/path/:param1/:param2', 
     component: SomeComponent,
     props: true, // 默认情况下，组件会接收来自父路由的全部prop，如果不需要，可以设置为true
     params: {
       // 这里可以直接访问params，如 this.$route.params.param1 和 this.$route.params.param2
     },
     query: {
       // 查询参数可以通过this.$route.query访问，如 this.$route.query.key1 和 this.$route.query.key2
     }
   }

   // 当前路由访问时，可以通过动态参数和查询参数的形式传递参数
   router.push({ name: 'someRoute', params: { param1: 'value1', param2: 'value2'}, query: { key1: 'value3' } });

2. **路径参数（params）**:
- 在`router.push`或`router.go`中，通过`params`对象传递参数：

   router.push({ name: 'someRoute', params: { key: 'value' } });

在组件内，可以通过`this.$route.params`来访问这些参数。

3. **props选项**[^2]：
如果你希望子组件直接接收路由参数，可以在路由规则中定义一个`props`函数：

   { 
     path: '/path/:customProp',
     component: CustomComponent,
     props: (route) => ({ customProp: route.params.customProp }) // 接收自定义属性
   }

在`CustomComponent`内部，你可以直接访问`this.customProp`。