🥽 学习 - vue-router@4 不规范的 params 传参导致接收不到数据

SLYLXDYMJ

字数：175 字

时长：1 分钟

在 vue2 中，若想在单页面项目中跳转页面时，不把参数暴漏在 url 中
可以通过不定义 prop，但是 $router.push 时在 params 里加上参数
在目标页面通过 $route.params.xxx 也能获取到

但是这种方式在 vue3 vue-router@4 中行不通了。

解决方法

通过 history.state 的方式传递参数

// 跳转时
this.$router.push({
  // ...
  state: {
    reportDetail: {
      generate: 'all'
    }
  }
  // ...
})

// 接收时
let data = window.history.state.reportDetail
delete window.history.state.reportDetail

console.log(data)
// => { generate: 'all' }

参考文档地址

关键词：错误的使用 params 传参

https://article.juejin.cn/post/7158107047861436423

vue-router@4 github

https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22