详细很多小伙伴用vue作过这样的项目:
这是目录,当你点击一项时,这一项的颜色就变了,当你浏览器地址栏改变url时,目录也会自动高亮url所指向的路由;
那么这是怎么实现的呢,直接上代码:
<el-menu
:router="true"
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="/home">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/manageTask/">
<i class="el-icon-folder-opened"></i>
<span slot="title">任务管理</span>
</el-menu-item>
<el-menu-item index="/manageLogs">
<i class="el-icon-notebook-2"></i>
<span slot="title">日志管理</span>
</el-menu-item>
</el-menu>
你只需要修改el-menu-item中的index值就行了呀(改为你的路由地址)
那么肯定有人遇到过这样url的情况:
http://localhost:8088/#/manageLogs?id=1
当url有参数,那目录就不自动高亮了,解决办法:
去router.js把你要跳转的哪一项路由的path修改为:(例子)
path: '/manageLogs/',
这样就能高亮显示了