元素 UI NavMenu 与当前路线不同步

Question

我将元素 UI NavMenu 与 :router="true" 一起使用。当我单击菜单链接（路线更改和活动菜单项更改）时，它工作正常。我遇到的问题是，当我单击浏览器导航按钮（back 和 forward）时，路由和组件发生变化，但 NavMenu 活动选项卡没有变化。

有没有一种简单的方法可以确保 NavMenu 和当前路线在使用浏览器导航按钮时彼此保持同步？我正在使用 vue-router 和 mode: 'history'。我本以为这会自动处理。

Answer 1

我最初尝试实施 this answer 但没有成功。我现在有一个针对此问题的有效解决方案。在我的导航组件中，我有一个 el-menu 和 :router="true" and:default-active="activeLink"`。

因为我有一个相当简单的 Vue 应用程序，所以我不想遍历我的路由器路径并动态构建 NavMenu。这是一个很好的做法，但我想先从基本层面了解它是如何工作的。

根据 element-ui 文档，default-active 控制 index of currently active menu。我添加了 activeLink 作为数据属性:

  data() {
    return {
      logo: logo,
      activeLink: null,
    }
  },

然后添加 watch 属性，如上文要点 link 中所述：

  watch: {
    $route (to, from) {
      this.activeLink = to.path;
    }
  },

我遗漏的部分是 index 和 el-menu-item 的 route 属性必须相同。此外，我们可以添加一个 mounted 方法来确保无论我们从哪个路径加载应用程序，都可以激活正确的导航 link：

  mounted: function(){
    this.activeLink = this.$route.path;
  },

这解决了当我使用浏览器导航按钮时 NavMenu 不同步的问题。

Answer 2

开始工作很痛苦。我根本无法让 beforeRouteUpdate() 工作，并且 :default-active="$route.path" 几乎可以工作，但如果你的路线有参数则不行。我目前的解决方案是命名我的所有路线，并在索引为名称的位置添加菜单项。然后 default-active 值可以从 $route.name.

中获取

        <el-menu :default-active="$route.name" @select="menuSelect">
          <el-menu-item index="summary">
            <span slot="title">Summary</span>
          </el-menu-item>
          <el-menu-item index="memory">
            <span slot="title">Memory Overview</span>
          </el-menu-item>
          ...
        </el-menu>

在你的组件中：

  public menuSelect(index: string) {
    this.$router.push({
      name: index,
    });
  }

您还可以像这样避免烦人的错误 Navigating to current location ("summary") is not allowed：

  public menuSelect(index: string) {
    if (this.$route.name !== index) {
      this.$router.push({
        name: index,
      });
    }
  }

元素 UI NavMenu 与当前路线不同步

Element UI NavMenu gets out of sync with current route

vue.js

vue-router

element-ui