根据不同路由,使对应的菜单高亮显示
element-ui中有关于菜单的代码,点击对应的菜单实现高亮显示,若是直接在URL中输入path地址,页面可以跳转,但菜单还是停留在原先的菜单上,路由跳转了但是对应的菜单并未高亮显示。
el-menu代码:
<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)。
//刷新页面时获取当前路由,对应菜单高亮显示 getActiveNav: function() { let currentUrl = window.location.href; this.NavActive = currentUrl.split('#')[1].replace("/",""); }, beforeMount() { this.getActiveNav(); },
2.在菜单栏中直接输入URL值时,通过监听路由变化,使得对应的菜单高亮显示。
通过监听路由的变化,获取到要跳转的路由,将对应的path赋值给NavActive 。
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,即需要带‘/’。