问题描述：
当设置的有默认路径时，进入到二级或三级路由时，刷新或前进后退操作会导致导航栏高亮没有改变或错误
使用前提
将router里面的main.js里的路由路径设置全部设置为完整的路径。
routes: [{
//路径为空时跳到发现音乐
path: '',
redirect: '/musicHome/findMusic',
},
{
path: '/musicHome',
name: 'musicHome',
component: () =>
import ('@/views/musicHome'),
children: [{
path: '/musicHome/findMusic',
name: 'findMusic',
redirect: '/musicHome/findMusic/personRecom',
component: () =>
import ('@/views/musicHome/findMusic/findMusic'),
children: [{
path: '/musicHome/findMusic/personRecom',
name: 'personRecom',
component: () =>
import ('@/views/musicHome/findMusic/personRecom/personRecom')
},
{
path: '/musicHome/findMusic/songList',
name: 'songList',
component: () =>
import ('@/views/musicHome/findMusic/songList/songList')
},
{
path: '/musicHome/findMusic/playList',
name: 'playList',
component: () =>
import ('@/views/musicHome/findMusic/playList/playList')
},
{
path: '/musicHome/findMusic/singerList',
name: 'singerList',
component: () =>
import ('@/views/musicHome/findMusic/singerList/singerList')
},
{
path: '/musicHome/findMusic/newSong',
name: 'newSong',
component: () =>
import ('@/views/musicHome/findMusic/newSong/newSong')
}
]
},
{
path: '/musicHome/recomVideo',
name: 'recomVideo',
component: () =>
import ('@/views/musicHome/recomVideo/recomVideo')
},
{
path: '/musicHome/myCloudMusic',
name: 'myCloudMusic',
component: () =>
import ('@/views/musicHome/myCloudMusic/myCloudMusic')
},
{
path: '/musicHome/myFavoriteMusic',
name: 'myFavoriteMusic',
component: () =>
import ('@/views/musicHome/myFavoriteMusic/myFavoriteMusic')
}
]
}
]
三级路由如下图：
代码：
<template>
<div class="headTab">
<el-menu default-active="/musicHome/findMusic/songList" class="el-menu-demo" mode="horizontal" :router="true">
<el-menu-item index="/musicHome/findMusic/personRecom">个性推荐</el-menu-item>
<el-menu-item index="/musicHome/findMusic/songList">歌单</el-menu-item>
<el-menu-item index="/musicHome/findMusic/playList">排行榜</el-menu-item>
<el-menu-item index="/musicHome/findMusic/singerList">歌手</el-menu-item>
<el-menu-item index="/musicHome/findMusic/newSong">最新音乐</el-menu-item>
</el-menu>
</div>
</template>
由图可见
我默认路由设置为为歌单
在页面刷新后，子路由并没有切换到歌单，但是默认高亮却切换到了歌单
原因分析：
网页刷新后导航栏也会随着刷新
所以导航栏高亮就会返回到之前设定好的默认值
解决办法
给默认高亮路径绑定为当前路由路径
代码如下：
<template>
<div class="headTab">
<el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" :router="true">
<el-menu-item index="/musicHome/findMusic/personRecom">个性推荐</el-menu-item>
<el-menu-item index="/musicHome/findMusic/songList">歌单</el-menu-item>
<el-menu-item index="/musicHome/findMusic/playList">排行榜</el-menu-item>
<el-menu-item index="/musicHome/findMusic/singerList">歌手</el-menu-item>
<el-menu-item index="/musicHome/findMusic/newSong">最新音乐</el-menu-item>
</el-menu>
</div>
</template>
记住默认高亮前需要加上:哦
修改后三级路由效果图
前进后退都可以让对应的导航栏保持高亮
二级路由中
二级路由中（也就是三级路由的上一级）我也想如法炮制使用
<template>
<div class="leftNav">
<el-col>
<el-menu
:router="true"
active-text-color = '#000000'
:default-active="this.$route.path"
class="el-menu-vertical-demo"
text-color="#5c5c5c"
@open="handleOpen"
@close="handleClose">
<p class="leftNavFont">推荐</p>
<div>
<el-menu-item index="/musicHome/findMusic">
<i class="iconfont icon-music"></i>
<span slot="title">发现音乐</span>
</el-menu-item>
<el-menu-item index="/musicHome/recomVideo">
<i class="iconfont icon-video"></i>
<span slot="title">推荐视频</span>
</el-menu-item>
</div>
<p class="leftNavFont">我的音乐</p>
<div>
<el-menu-item index="/musicHome/myCloudMusic">
<i class="iconfont icon-yun"></i>
<span slot="title">我的音乐云盘</span>
</el-menu-item>
</div>
<p class="leftNavFont">创建的歌单</p>
<div>
<el-menu-item index="/musicHome/myFavoriteMusic">
<i class="iconfont icon-heart"></i>
<span slot="title">我喜欢的音乐</span>
</el-menu-item>
</div>
</el-menu>
</el-col>
</div>
</template>
效果图
咦？？？？
为什么我的二级路由反而没有高亮了呢
于是我打印出了当前的路由路径
看到这里大家是不是明白了
原因分析：
当前路由指向的是/musicHome/findMusic/songList，但二级路由的路径却是/musicHome/findMusic，所以它当然不会高亮！
那么我们想一想，是不是我们能用到js的一些函数对当前路径进行处理，只拿到我们想要的那一部分就可以了呢？
解决办法
我对当前路径做了处理，只截取到二级路由的那一部分
created() {
console.log('/' + this.$route.path.split('/')[1] + '/' + this.$route.path.split('/')[2]);
},
这样就拿到啦
对默认路由高亮进行修改
:default-active="'/' + this.$route.path.split('/')[1] + '/' + this.$route.path.split('/')[2]"
效果图
现在无论刷新还是前进后退相应的路由都会保持高亮了。
总结
把导航栏的默认高亮路由路径绑定到相应的路由路径，无论是几级路由，把当前路由需要的部分截取下来就能完成绑定功能啦
