前言：最近一直忙于公司项目，闲暇时间搞一下自己的项目， 使用了element ui 来实现，导航菜单刷新一直不显示选中高亮，点击时候会高亮，进入页面却不会高亮，原因是设置 :default-active 根本不起作用，现将解决方案公布如下：
第一步：element-ui的Menu Attribute中有一个default-active属性，这个属性绑定的值就是当前路由的path或者是name属性，首先动态绑定一下efault-active属性，如下
<el-aside style="width: 200px">
<el-menu
@open="handleOpen"
@close="handleClose"
unique-opened
active-text-color="#409eff"
:default-active="$route.path"
v-for="item in currentRoute"
:key="item.key"
:index="item.name"
>
<el-submenu :index="item.key" v-if="item.children">
<template slot="title">
<i :class="item.meta.icon" />{{ item.meta.title }}</template
>
<el-menu-item
v-for="itemRoute in item.children"
:key="itemRoute.key"
:index="itemRoute.path"
@click="() => toPath(itemRoute)"
>{{ itemRoute.meta.title }}</el-menu-item
>
</el-submenu>
</el-menu>
</el-aside>
第二步：需要使用给子目录绑定一个点击事件，当每次点击子目录时就会跳转到相应的路由上
toPath(opt) {
const { path } = this.$route;
if (opt.path !== path) {
this.$router.push({ path: opt.path });
}
},
第三步：当路由跳转的时候，this.$route.path就会获取到最新的路由，并将其动态绑定给default-active属性，此时Menu Attribute就会自动实现高亮效果啦！！！
第四步：如果你以上做的都是对的，但是目录还是只在点击时高亮，刷新页面就高亮消失，检查下你是否添加了active-text-color属性哦！！！！！！！
