vue element NavMenu :default-active根据路由进行自动配置（包括点击页面中的链接，即将前往的页面不在导航中，想要保持最外层级别的导航保持高亮）

导航当中设置:default-active值之后点击页面中的跳转链接（即将前往的页面不在导航中），此时的导航高亮就会消失，

目标：

1. 点击父页面中的查看按钮，进入到详情页面，父页面导航仍然保持高亮。
2. 刷新浏览器导航，当前页面对应的导航仍然保持高亮。
3. 未退出系统，直接关闭浏览器的情况下，浏览器直接输入地址进入系统的，打开什么页面相对应导航高亮

呈上代码：
在index.js中添加下面代码：（路由权限中获取to.path 截取掉path中的/，存储到session中为了解决刷新浏览器和直接关闭浏览器的情况）

// 配置路由权限
router.beforeEach((to, from, next) => {
  let token=localStorage.getItem('token')
  localStorage.setItem('backRouter', from.name);//上个页面的url
  //处理导航选中开始
  let currPath=to.path
  currPath=currPath.substring(1,currPath.length)
  if (currPath === 'guideIndex' | 'EvaluationInformation' | 'ChooseCompany' | 'SelectTemplate' | 'MaterialReview' | 'implementation' | 'evaluationConfig' | 'CheckList' | 'ExecutionEvaluation') sessionStorage.setItem('menuDefaultActive','guide')
  else if (currPath === 'statusMonitoring') sessionStorage.setItem('menuDefaultActive','serviceStatus')
  else sessionStorage.setItem('menuDefaultActive',currPath)
  //处理导航选中结束
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (token) { // 判断本地是否存在access_token
      NProgress.start()//页面加载进度条开始
      next()
      
    } else {
      // 未登录,跳转到登陆页面，并且带上 将要去的地址，方便登陆后跳转。
      next('/login')
    }
  } else {
    next()
  }
})

在导航文件中（我是抽离出来的aside.vue）

data () {
	return {
		menuDefaultActive:sessionStorage.getItem('menuDefaultActive')
	}
}

在template中绑定:default-active=“menuDefaultActive”，

<el-menu
 :default-active="menuDefaultActive"
  class="el-menu-vertical-demo"
  @open="handleOpen"
  @close="handleClose"
  text-color="" active-text-color="#409eff"
  router
  unique-opened
  >
  <template v-for="(item,index) in menuData">
    <el-submenu v-if="item.children" :index="item.pathName" :key="index">
      <template slot="title">
        <i :class="item.iconName"></i>
        <span style="">{{item.menuItem}}</span>
      </template>
      <template v-for="(result,i) in item.children">
        <el-menu-item :route="{name:result.pathName}" :index="result.pathName" :key="i">{{result.menuItem}}</el-menu-item>
      </template>
    </el-submenu>
    <el-menu-item v-else :route="{name:item.pathName}" :index="item.pathName" :key='index' class="first">
      <i :class="item.iconName"></i>
      <span slot="title">{{item.menuItem}}</span>
    </el-menu-item>
  </template>
</el-menu>

菜单有一级二级菜单，我自行抽了个模板出来需要的可以直接用 ，直接遍历数据即可，如果要是接口的可以直接提换数据
数据格式我采取和路由配置的方式相同

 menuData:[
{
   pathName:'index',
   menuItem:'首页',
   iconName:'el-icon-menu'
 },{
   pathName:'menu_node_1',
   menuItem:'信息安全测评',
   iconName:'el-icon-s-custom',
   children:[{
     pathName:'guide',
     menuItem:'测评向导'
   },{
     pathName:'trace',
     menuItem:'测评跟踪'
   },{
     pathName:'result',
     menuItem:'测评结果'
   }]
 },{
   pathName:'menu_node_2',
   menuItem:'参评企业管理',
   iconName:'el-icon-office-building',
   children:[{
     pathName:'company',
     menuItem:'企业列表'
   }]
 },{
   pathName:'menu_node_3',
   menuItem:'评测模板管理',
   iconName:'el-icon-document-copy',
   children:[{
     pathName:'templatePage',
     menuItem:'模板列表'
   }]
 },{
   pathName:'menu_node_4',
   menuItem:'评测用例管理',
   iconName:'el-icon-folder-opened',
   children:[{
     pathName:'check',
     menuItem:'材料审查用例'
   },{
     pathName:'tests',
     menuItem:'技术测试用例'
   }]
 },{
   pathName:'menu_node_5',
   menuItem:'系统权限管理',
   iconName:'el-icon-lock',
   children:[{
     pathName:'administrator',
     menuItem:'评测管理员'
   },{
     pathName:'record',
     menuItem:'系统操作记录'
   }]
 },{
   pathName:'menu_node_6',
   menuItem:'系统配置管理',
   iconName:'el-icon-setting',
   children:[{
     pathName:'config',
     menuItem:'系统配置参数'
   }]
 },{
   pathName:'menu_node_8',
   menuItem:'服务状态监控',
   iconName:'el-icon-view',
   children:[{
     pathName:'serviceStatus',
     menuItem:'信息服务状态'
   }]
 },{
   pathName:'indicatorSystem',
   menuItem:'安全指标体系',
   iconName:'el-icon-menu'
 }
]