vue-router 版本 > v4.1.4 如何优雅传参?-灵析社区

饼干爱折腾

[vue-router v4.1.4 更新日志](https://link.segmentfault.com/?enc=bZ8uPqxDFgvr%2FhyB%2Br4Iwg%3D%3D.TCHW46hOoPeLP%2F3QNact4doBo6FRT%2B1R8VqHK70uRejdCuM9ASOVzzFTrlH6N2yKTdPNGIiROxbxraDmE8wVPWwSudaDFmyRh7l9T30wpTXMmH7iNcPMf6ZhQk7h0fkj) 官方似乎不再支持以下的写法了: router.push({ name: 'somewhere', params: { oops: { a: { b: { c: 'gets removed'} } } }) 这么写会提示: `Discarded invalid param(s)... ` 官方推荐的替代方案: 1. 将数据放入pinia等存储中 2. path query 3. HistoryState 4. 将其作为新属性传递给to.meta 导航守卫 方案1感觉让代码变得过于复杂了。 方案2对于需要传递复杂的对象。而不是简单的字符串或数字的话似乎无法做到 方案4同1 方案3不太了解, 除了方案3, 请问有什么更优雅的写法吗?

阅读量:122

点赞量:0

问AI
🙄 "params" 传递参数为什么不支持? 👉 "编程式导航 | Vue Router" (https://link.segmentfault.com/?enc=DdbkUmobjB25XboDd8U1uw%3D%3D.r%2FrHgiUjiV%2B19hwMqyoWlbmWZf6ksgn9EO206yp4bFPtB4peOKonqY4A8caVar10zJZLEZqCc45i4ANIGS3yYQ%3D%3D) 不支持的你没有在 "router" 配置的时候显式声明你的 "params" 参数啊! const routes = [{ path: '/test/:oops', name: 'somewhere', component: somewhereComoponent }] 在 "Vue2.x" 时期,也就是 "vue-router 3.x" 版本的时候我们不想在URL上面展示一些传参信息的时候会通过不在路由配置中显式声明 "params" 参数,然后通过 "router.push({ name: 'user', params: { username: 'eduardo' } })" 的方式去跳转。 这样就不会在URL中展示 "params" 参数。同时会在刷新页面时候丢失 "params" 参数,也起到一些特殊地业务处理方式。 但是在 "vue-router 4.x" 版本之后就不是这样了,如果没有显示声明 "params" 参数,在使用 "router.push({ name: 'user', params: { username: 'eduardo' } })" 的方式去跳转地时候, "vue-router" 会把 "params" 参数给抛弃,并且在控制台抛出异常提示。 这其实是因为早期我们不规范的使用 "params" 造成的。如果你不想显式的在路由表中声明,那么也可以使用 "query" 参数的形式来替代。但是如果你想要传参的同时不要想在URL中显示参数信息,那么可以通过更新文档中提到的这些方式来操作。