【vue】vue-router中切换页面query参数丢失的解决方法

Posted 2023-03-14

参考技术A 很多前端老铁通常在做PC端管理系统类的项目时，会使用vue-router和ElementUI中的el-menu结合的方式：

   router参数为引入的router.js文件。在配置vue的路由时，采用 命名视图 。如下：

在router文件中引用上述配置：

一般情况下，使用这样的方式已经可以满足各种路由的要求。直接点击左侧menu边栏可实现路由的切换。但需要带query参数时，会出现问题：

当我们想要配置query参数时，官方推荐的方法为：

当我们的当前url为： www.jianshu.com/home?a=1&b=2时，点击侧边栏router配置参数，却无法实现带参路由，会出现当边栏切换后，跳转detail页面时参数丢失。点击menu里的detail页导航，路由切换为：

问号后的参数全部缺失，导致页面报错。

解决方案如下：

在router文件中，使用beforeEach函数，本地保存首次页面进入时的query：

menu.vue中添加select钩子函数做router处理：

修改后测试，问题完美解决。全部路由切换都带query参数。