根据不同路由,使对应的菜单高亮显示
element-ui中有关于菜单的代码,点击对应的菜单实现高亮显示,若是直接在URL中输入path地址,页面可以跳转,但菜单还是停留在原先的菜单上,路由跳转了但是对应的菜单并未高亮显示。
el-menu代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <el-menu class = "el-menu-vertical-demo" @open= "handleOpen" @close= "handleClose" :collapse= "isCollapse" background-color= "#ffffff" text-color= "#43464a" active-text-color= "#8c10be" : default -active= "NavActive" unique-opened router style= "border:none;" > |
default-active属性表示当前激活菜单的index,给它赋值NavActive,当点击菜单时,菜单自动高亮显示,这是element-ui框架自己完成的。
当不点击菜单时,怎么让菜单高亮显示,有以下两种情况:
1.刷新页面时,通过获取到当前页面的路由,使得对应的菜单高亮显示。
通过window.location.href获取到当前页面的路由,然后赋值给NavActive 即可。需要在页面加载完成前调用该方法(beforeMount)。
1 2 3 4 5 6 7 8 9 | //刷新页面时获取当前路由,对应菜单高亮显示 getActiveNav: function () { let currentUrl = window.location.href; this .NavActive = currentUrl.split( '#' )[1].replace( "/" , "" ); }, beforeMount() { this .getActiveNav(); }, |
2.在菜单栏中直接输入URL值时,通过监听路由变化,使得对应的菜单高亮显示。
通过监听路由的变化,获取到要跳转的路由,将对应的path赋值给NavActive 。
1 2 3 4 5 6 7 8 9 10 11 12 | watch: { //监听路由变化 $route(index) { let path = index.path.substr(1); this .handleSelect(path); } } //监听路由的变化,对应菜单高亮显示 handleSelect(index) { this .NavActive = index; } |
注意:
1.以上两种情况都是需要将获取/监听到的路由的值赋值给变量NavActive ,此时属性default-active(当前激活菜单的 index)即为想要高亮显示的菜单对应的路由,就自然高亮显示了。所以重点就是获取到对应的路由,赋值即可。
2.:default-active="$route.path"
3.default-active表示的是“当前激活菜单的index”,需要是/path,即需要带‘/’。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步