在vue-router 4.1.4 版本之前,我们想要跳转路由并且不想在路径上暴露参数(或者传递参数过多,为了保持路由整洁性) 会使用 name + params 方式传参
如下:
// 路由跳转
router.push(
{
name: 'TestRouteName',
params: {
id: 'test111'
}
}
)
// 在name 为 TestRouteName 对应 路由页面获取路由参数
const id = route.params.id
但是这样传参有个缺点,就是在刷新页面后丢失 params 参数
在vue-router 4.1.4 使用这种方式传参无法通过 route.params.xx 获取对应参数
在vue-router 4.1.4 之后版本使用 name + params 传参方式如下
// 路由跳转
router.push(
{
name: 'TestRouteName',
params: {
id: 'test111'
}
}
)
// 路由配置
...
{
path: 'add/:id',
component: () => import('@/views/xxx/TestRouteName.vue'),
name: 'TestRouteName',
meta: {
title: '测试跳转',
key: 'TestRouteName',
hidden: true,
},
},
...
// 跳转后对应的路径为
/parent-router/add/test111
官网更新日志地址:
https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
官方给出的建议如上图:
1. 使用pinia vuex 等状态管理库
2. 将参数暴露在url中
3. 将数据作为状态保存在window.history api 中的state 中
例如:
// 路由跳转
router.push(
{
name: 'TestRouteName',
state: {
id: 'test111'
}
}
)
// 对应页面获取参数
const id = window.history.state.params.id
4. 使用路由守卫
ps: 根据业务场景使用符合自己要求的方式
另:
我的业务使用方式2就可以解决,但是有些复杂业务可能不满足要求,下边这个博文我感觉使用场景更为复杂,作者博客也写的很好