vue 父子路由的实现以及父子路由的高亮切换显示问题

父子路由的实现

vue中，一般路由都是写在router中index.js下的,如

  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: About
    },
  ]

父子的路由利用children来实现：

    {
      path: "/about",
      component: About,
      children: [
        {
          path: "/about/me",
          component: () => import("../pages/about/Me.vue") // 这里是利用懒加载方式
        },
        {
          path: "/about/edu",
          component: () => import("../pages/about/Edu.vue")
        }
      ]
    },

父子路由的高亮切换

在vue中，我们默认控制高亮显示以及激活高亮的类名

.router-link-active，
.router-link-exact-active。

这里我用active中代表router-link-active，

  linkActiveClass: "active", 
  linkExactActiveClass: "",
  // 控制router-link-active和router-link-exact-active的类名，当为""就是不用这个类名，也可以自己命名类名像active

问题

我们需要实现的效果，父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失.
在实际开发中，可能遇到了当前路由下（父路由）在点击它的子路由时，他的（父路由）选中状态消失了

原因

1、子路由router-link加了exac精确匹配路由

解决办法

1. 在子路由前面加上父路由路径（使父路由高亮）,并重定向到子路由路径（使子路由高亮），如下：

    {
      path: "/rank",
      component: Rank,
      redirect: "/rank/android", //重定向 
      children: [
        {
          path: "/rank/android",
          component: () => import("../pages/ranking/Android.vue") //懒加载
        },
        {
          path: "/rank/vendor",
          component: () => import("../pages/ranking/Vendor.vue") //懒加载
        }
      ]
    },

2. 使用.router-link-active代替.router-link-exact-active

最终结果

最后解决了问题。

关于vue的相关知识请参考 vue中文文档

————————————————————————————————————————————

码字不易，请用你的小手点个赞或收藏，感激不尽，Thanks♪(･ω･)ﾉ