前言
这篇文章的话是要跟据自己项目的router路径来锁定菜单的默认选择值,因为代码的话就是整个项目的一个交互,所以这篇文章,主要内容是用文字和图片来和大家讲解原理的,代码就很少,主要就是它的原理构成,话不多说,现在开始为大家讲解。
一,为什么会有这个需求
在开发时,我们的用户点击菜单的第二个选项,看到里面的内容时,然后F5刷新,没有设置的情况下,它的菜单高亮还是会默认的选择原有设置的一个,我们的目的就是把默认选择高亮的菜单变成动态的,它的选择是根据路径来变化的
二,开始
在element中,制作侧边栏要用的是这些
大家都知道它的默认选择属性是default-active,我们的目的就是要把它变成动态的
我这里写的比较简单一些,如图所示
它只是一个一级套两个二级,如果你需要更多的话可以按照我的这个格式套,路由的地方就不和大家讲解了,如果不会的话我之前的博客有,可以去看,这些东西都是开发必备的。
然后现在的效果是
如果刷新的话,我们当时是在two的页面上,如果没有设置的话,那么高亮的文字还是我的线索,如下图
我们要把default-active属性设置为动态的 设置为 :default-active=“open”
然后在methods里写一个函数
openindex(c) {
for (var i = 0; i < this.menuItems.length; i++) {
for (var j = 0; j < this.menuItems[i].children.length; j++) {
if (c.replace("/", "") == this.menuItems[i].children[j].name) {
return `${i}-${j}`;
}
}
}
}
然后在在mounten()里面写入
mounted() {
//调用根据路径来获取默认的菜单选择
var c = this.$route.path;
this.open = this.openindex(c);
}
这样的话我们之前在那个页面刷新之后菜单也是对应的那个页面
结语
这就是调节菜单默认高亮的所有详细步骤,希望对你有所帮助