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

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

 

      :default-active="$route.path"

      unique-opened

      router

      @open="handleOpen"

    >

   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处理：

 

      @select="handleSelect"     // 添加select钩子函数

      :default-active="$route.path"

      unique-opened

      router             // 删除router，不使用menu的router参数做路由

      @open="handleOpen"

    >

handleSelect(key, keyPath) {

  this.$router.push({      // 使用最传统的push方式带query 传参

        path: key,

        query: {data: 'query'}     

    })

}

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