Element UI NavMenu 与当前路线不同步

Question

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

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

Answer 1

上班很痛苦。我根本无法让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,
      });
    }
  }

Answer 2

我最初尝试实现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 属性，如上面链接的要点中所述：

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

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

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

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