很多前端老铁通常在做PC端管理系统类的项目时，会使用vue-router和ElementUI中的el-menu结合的方式：
<el-menu
:default-active="$route.path"
unique-opened
router
@open="handleOpen"
>
</el-menu>
router参数为引入的router.js文件。在配置vue的路由时，采用命名视图。如下：
// routerSetting.js
const routes = [
{
path: "/",
name: "home",
component: Home,
redirect: "/home",
children:[
{
path: 'home',
name: 'home',
component: () => import("@/views/home/index.vue")
},
{
path: 'detail',
name: 'detail',
component: () => import("@/detail/index.vue")
}
]
}
]
在router文件中引用上述配置：
const router = newVueRouter(routerSetting);
一般情况下，使用这样的方式已经可以满足各种路由的要求。直接点击左侧menu边栏可实现路由的切换。但需要带query参数时，会出现问题：
当我们想要配置query参数时，官方推荐的方法为：
{
path: 'detail',
name: 'detail',
component: () => import("@/detail/index.vue"),
props: (route) => ({ query: route.query.q })
}
当我们的当前url为： www.jianshu.com/home?a=1&b=2时，点击侧边栏router配置参数，却无法实现带参路由，会出现当边栏切换后，跳转detail页面时参数丢失。点击menu里的detail页导航，路由切换为：
www.jianshu.com/detail
问号后的参数全部缺失，导致页面报错。
解决方案如下：
在router文件中，使用beforeEach函数，本地保存首次页面进入时的query：
// 跳转之前
router.beforeEach((to, from, next) => {
const query: any = Object.assign(
{},
JSON.parse(JSON.stringify(to.query)),
JSON.parse(JSON.stringify(from.query))
);
if (JSON.stringify(query) !== '{}') { // 保存进入页面后的query参数
localStorage.setItem('query', JSON.stringify(query));
}
})
menu.vue中添加select钩子函数做router处理：
<el-menu
@select="handleSelect" // 添加select钩子函数
:default-active="$route.path"
unique-opened
router// 删除router，不使用menu的router参数做路由@open="handleOpen"
>
</el-menu>
handleSelect(key, keyPath) {
this.$router.push({ // 使用最传统的push方式带query 传参
path: key,
query: {data: 'query'}
})
}
修改后测试，问题完美解决。全部路由切换都带query参数。
