vue-router 4.1.4之后版本 路由传参 name+params 方式 注意

 在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就可以解决，但是有些复杂业务可能不满足要求，下边这个博文我感觉使用场景更为复杂，作者博客也写的很好

https://www.cnblogs.com/cosmicbison/p/17451020.html