路由解耦-解决Vue通过name和params进行跳转页面传参刷新参数丢失的问题

Posted 2023-03-01

参考技术A

最近在写Vue搭建的后台管理系统，在跳转页面时想要 保留 地址栏参数，使刷新参数还在，但是不想显示id:1,code:2的字段名id和code，怎么办呢？
通常我们在两个页面传数据时，一般会采用params，query，或者将数据用vuex，localStorage，sessionStorage，然后方便其他页面调用数据，但是params和vuex只要页面刷新，穿过来的数据就会丢失，下面请看用 params 传数据

调整函数：

这样传参时，地址栏就会出现参数了，这样数据就不会丢失了。

除此之外，我们还可以选择配合 路由解耦 来使用
优势： 对路由参数的改变不需要通过 this. route和通过beforeRouteUpdate传值时通过$route.params获取参数改变时麻烦的写法：
只适用于 params，不适用于query；
实现方式：
在路由的配置项加一个props：true；
修改路由配置为：

要调整的组件中的props：

最后的效果 （刷新不会丢失）：

当然也可以通过 path 和 query 的方式进行传参 this.$router.push(path: 路由路径，query: 要传的产生 )
但是这不能进行 props 解耦。