【已解决】页内切换<router-view>使得url变化导致菜单高亮消失

在写项目时,我们常会用到侧边菜单栏,而具体页面中经常使用<router-view>切换子组件。

但是按照我们平时的写法,切换子组件后会导致url改变,从而使得菜单高亮消失,这是非常影响用户体验的。

所以,我们需要找到router.push切换子组件但是不改变url的方法。

首先,在设置路由时,我们需要给路由设置一个name,方便我们进行跳转的路由指定。

 {
      path: "/page",
      name: "myPage",
      component: () => import("@/views/testPage.vue"),
},

按照平时的写法,我们会设置重定向指定进入页面时显示的子组件,以及两个子组件的路径。

      {
        path: "outside",
        name: "outside",
        component: () => import("@/views/outside.vue"),
        redirect: "/inside1",
        children: [
          {
            path: "/inside1",
            name: "inside1",
            component: () => import("@/views/inside1.vue"),
          },
          {
            path: "/inside2",
            name: "inside2",
            component: () => import("@/views/inside2.vue"),
          },
        ],
      },

(路由)

 router.push({path:'inside1'})

 (切换子组件)

当我们使用router.push进行<router-view>组件切换时,当使用inside1子组件时,url会变成“/inside1”;当使用inside2子组件时,url会变成“/inside2”。

但是在我们的菜单配置文件中,只有url为“/outside”时才会让当前菜单高亮。

(图源网络)

自己摸索了一会被我给搞定了!

我们只需要做一点点改动

      {
        path: "outside",
        name: "outside",
        component: () => import("@/views/outside.vue"),
        redirect: "/inside1",
 
     {
        path: "outside",
        name: "outside",
        component: () => import("@/views/outside.vue"),
        // redirect: "/inside1",//默认情况下显示的是第一个子组件
        children: [
          {
            path: "/outside",
            name: "inside1",
            component: () => import("@/views/inside1.vue"),
          },
          {
            path: "/outside",
            name: "inside2",
            component: () => import("@/views/inside2.vue"),
          },
        ],
      },

(路由)

 router.push({name:'inside1'})

可以看到,我们只需要把子组件的path改为与父组件一致(但name保留为子组件自己的)

而进行跳转时,使用name指定需要切换的组件即可。

这样,在切换子组件时,便可以实现丝滑切换且url不发生改变。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>