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

本文介绍: 当我们使用 router.push进行组件切换时，当使用 in s ide1子组件时，url会变成“/in s ide1”;但是按照我们平时的写法，切换子组件后会导致url改变，从而使得菜单高亮消失，这是非常影响用户体验的。可以看到，我们只需要把子组件的path 改为与父组件一致（但name 保留为子组件自己的）按照平时的写法，我们会设置重定向指定进入页面时显示的子组件，以及两个子组件的路径。首先，在设置路由时，我们需要给路由设置一个 name，方便我们进行跳转的路由指定。我们只需要做一点点改动。

在写项目时，我们常会用到侧边菜单栏，而具体页面中经常使用<router–view&g t;切换子组件。

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

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

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

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

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

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

（路由）

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

(切换子组件)

当我们使用 router.push进行<route r–view>组件切换时，当使用in si d e1子组件时，url会变成“/insid e1”;当使用inside2子组件时，url会变成“/inside2”。

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

（图源网络）

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

我们只需要做一点点改动

      {
        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"),
          },
        ],
      },