vue element开发侧边栏时的菜单根据路径动态绑定

前言

这篇文章的话是要跟据自己项目的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);
  }

这样的话我们之前在那个页面刷新之后菜单也是对应的那个页面

结语

这就是调节菜单默认高亮的所有详细步骤，希望对你有所帮助