【已解决】页内切换＜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不发生改变。