vue路由设置：父路切换子路由active样式不会消失

vue小白今天在写导航栏的过程中出现了一个问题，记录一下解决办法。

问题：

当前路由下（父路由）点击它的子路由时，它（父路由）的选中状态消失了。
通过两个小时的查找资料，终于通过阅读这篇博客
link.
解决了问题，感谢！

原因：

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

2、在写路由的时候，父子路由没有严格按照一级/二级来写

相关知识点：

router-link 作为 vue 中的路由跳转标签，它内置有一个选中的状态，当处于当前路由时，会给 router-link 加一个 router-active-class，即选中状态的 class，同时还提供有一个 exact 属性，当加了 exact 属性的时候表示精确匹配，也就是会精确匹配 Url，所以如果给主路由设置了 exact 属性的话，当处于子路由时，Url 就匹配不到主路由了，那么主路由也就不会处于选中状态。

代码：

在index.js中配置 路由如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Home from '../views/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/Home',
      name: 'home',
      component: Home,
      children:[
        {
          path: '/Home/list',     //子路由路径前面一定要加父路由Home
          name: 'list',
          component:() => import(/* webpackChunkName:"list" */ '../views/List.vue')
        },
        {
          path: '/Home/add',
          name: 'add',
          component:() => import(/* webpackChunkName:"list" */ '../views/Add.vue')
        },
        {
          path: '/Home/user',
          name: 'user',
          component:() => import(/* webpackChunkName:"user" */ '../views/User.vue')
        }

      ]
    }
  ]
})

Home.vue中的子路由路径前面也要添加父路由

<template>
  <div>
    <router-view/>
    <div id="nav">
    <ul class="footer">
      <!--<li class="icons"><router-link :to="{name:'list'}" class="active">新闻列表</router-link></li>
      <li class="icons" @click="active()"><router-link :to="{name:'user'}">个人中心</router-link></li>-->
      <li class="icons"
          v-for="(item, index) in nav"
          @click="routerLink(index, item.path)"
          :class=" navIndex === index ? 'router-link-active' : ''"
          :key="index">
        <!-- 判断高亮表 -->
        <p :class=" navIndex === index ? 'router-link-active' : ''">
          {{ item.title }}
        </p>
      </li>
    </ul>
    </div>
  </div>

</template>

<script>
    export default {
      name: "Home",
      data(){
        return{
          nav:[
            {title:'新闻列表',path:'/Home/list',name:'List'}, //子路由路径前面一定要加父路由Home
            {title:'个人中心',path:'/Home/user',name:'User'},
            {title:'关于我们',path:'/Home/add',name:'Add'}
          ],
          navIndex:0
        }
      },
      methods:{
        /**
         * 路由跳转
         * @param index
         * @param link
         */
        routerLink(index, path) {
          // 点击哪个路由就赋值给自定义的下下标
          this.navIndex = index;
          // 路由跳转
          this.$router.push(path)
        },

        /**
         * 检索当前路径
         * @param path
         */
        checkRouterLocal(path) {
          // 查找当前路由下标高亮
          this.navIndex = this.nav.findIndex(item => item.path === path);
        }
      },
      watch: {
        "$route"() {
          // 获取当前路径
          let path = this.$route.path;
          // 检索当前路径
          this.checkRouterLocal(path);
        }
      },
    }
</script>

<style scoped>
  #nav{
    background-color: white;
    position: fixed;
    bottom: 0;
    z-index:1;
    left:0;
    width: 100%;
    height:25px;
  }
  #nav ul{
    position: fixed;
    bottom: 0;
    z-index:1;
    left:0;
    width: 100%;
    padding: 0px 0px;
  }
  .icons{
    list-style-type: none;
    font-size: 20px;
    width: 33%;
    float:left;
    text-align: center;
    border-top: 1px solid red;
    //overflow: hidden;
  }
  a{
    display: block;
    color: gray;
    padding:0;
    text-decoration: none;
  }
  .router-link-active{
    background-color: red;
    color: white;
  }
</style>