elment-ui菜单栏

问题/需求/bug描述
需求：菜单栏中高亮（激活）当前页面的菜单
bug：官网中高亮菜单栏的话要双击才行。但是实际项目中单击后高亮菜单是最符合用户感受的

解决
更改菜单el-menu中的:default-active属性为$route.path

源码：

 <el-menu
          :default-active="$route.path"
          mode="horizontal"
          @select="handleSelect"
          background-color="#87B5E4"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="/" style="font-size: 100%;font-size: 1.2em">首&nbsp;&nbsp;&nbsp;&nbsp;页</el-menu-item>
          <el-menu-item index="/r" style="font-size: 100%;font-size: 1.2em">页面二</el-menu-item>
          <el-menu-item index="/p" style="font-size: 100%;font-size: 1.2em">页面三</el-menu-item>
          <el-menu-item index="/a" style="font-size: 100%;font-size: 1.2em">页面四</el-menu-item>
        </el-menu>

效果

引用：https://www.jianshu.com/p/85a1590d9309

注：
自己将属性:default-active改为$router.currentRoute.name这个方法改不到这个效果