如何使用vue的路由传参数

Vue.js路由系统允许你在URL中传递参数，并在组件之间共享这些参数。主要有两种方法可以用来传递参数：

1. **查询参数** (Query Parameters):
- 使用动态路由（动态部分用`{}`包围）并添加冒号(`:`)后跟参数名，例如：

     import { useRouter } from 'vue-router';
     const router = useRouter();
     router.push(`/users/:userId`);

- 接收参数时，在组件内使用`:userId`作为变量，然后使用`this.$route.params.userId`来访问该参数值。

2. **路径参数** (Path Parameters):
- 直接在静态路由路径中指定，不需要冒号，浏览器会自动将其解析为对象：

     router.push('/user/123');

- 在组件内部，你可以使用`this.$route.matched[0].params.userId`来访问路径参数。

3. **命名路由** (Named Routes):
- 创建具有名称的路由，然后可以使用`router.resolve()`方法：

     const { params } = router.resolve('user-profile', '/user/:userId');

- 或者直接使用`this.$router.namedRoute('user-profile').params.userId`。

4. **Vuex state management**:
- 对于更复杂的场景，可以将参数存储在Vuex store中，跨路由共享。

记住，在每次导航到新页面时，可以通过`$route`对象获取当前路由及其参数。