002.vue-cli2.x中使用嵌套路由时，二级路由激活，一级路由状态丢失的解决办法

vue2.x中使用嵌套路由时，二级路由激活，一级路由状态丢失

问题描述：vue2.x中在使用嵌套路由(二级)，在二级路由激活时，一级路由的激活状态丢失。

已有激活样式类如下:

.router-link-exact-active {
	color: #42b983;
}

原因分析

​ …

解决步骤:

1. 为需要添加的路由标签添加动态绑定样式类代码

   v-bind:class={ '样式类名' : 表达式或布尔值 }
   
   /**
    *	v-bind:class={ '样式类名' : 表达式或布尔值 }
   	当前代码中负责表示样式类添加与否的开关变量由routerLinkIsActive(param path)方法返回
   	该方法接受一个路由路径参数path，用于和当前页面路由对象的path进行匹配。
   	如果当前页面路由path对象以指定path开头的话，则表示这个路由被激活，就返回true表示添加样式类
    */
   
   <router-link :class="{'router-link-exact-active': routerLinkIsActive('/history')}" to="/history">历史记录</router-link>
   
   methods:{
   	/**
   	 * @param {Object} path 路由地址参数
   	 */
   	routerLinkActive(path){
   		/**
   		 * 判断当前路由地址是否以传入地址参数相匹配，并返回结果决定是否激活路由状态。
   		 * 路由对象被vue监测，路由对象一旦发生变化跟其相关的值都要更新，从而影响activeCSS样式类的开关
   		 */
   		return this.$route.path.startsWith(path)
   	}
   }
   
   
   /**
   路由信息有
   */
   
   {
       path: '/history',
       name: 'History',
       component: () => import('../views/history/index.vue'),
   	children: [
   	        {
   	          path: 'dataGrid',
   	          component: () => import('../views/history/DataGrid.vue')
   	        }
       ]
   }
   
   

   效果：