vue-router传参方式

Vue Router 有多种传参方式：

1. 路由参数（动态路由）：在路由定义中使用冒号来声明一个参数，例如 `/user/:id`，然后在组件中通过 `$route.params.id` 来获取参数值。

2. 查询参数（Query）：在路由链接中使用查询参数，例如 `/user?id=123`，然后在组件中通过 `$route.query.id` 来获取参数值。

3. 命名路由参数：在路由定义中使用 `name` 来给路由命名，例如 `{ path: '/user/:id', name: 'user' }`，然后在组件中通过 `$route.params.id` 或 `$route.params['id']` 来获取参数值。

4. 局部状态：在组件中定义局部状态，例如 `data()` 中的属性，然后在路由钩子函数中传递参数，例如 `beforeRouteEnter(to, from, next) { next(vm => vm.setData(to.params.id)) }`。

5. 跳转时传参：在 `router-link` 中使用 `to` 属性来跳转并传递参数，例如 `<router-link :to="{ name: 'user', params: { id: 123 } }">`。

6. 编程式导航时传参：在调用 `router.push()` 或 `router.replace()` 时传递参数，例如 `router.push({ name: 'user', params: { id: 123 } })`。

需要注意的是，对于路由参数和查询参数，当参数发生变化时，组件不会重新渲染，需要使用 `watch` 或 `beforeRouteUpdate` 生命周期来监听参数变化。而对于局部状态、跳转时传参和编程式导航时传参，每次参数变化都会触发组件的重新渲染。