Element UI NavMenu 与当前路线不同步

Question

我将 Element UINavMenu与:router="true". 当我单击菜单链接（路由更改和活动菜单项更改）时，它工作正常。我遇到的问题是，当我单击浏览器导航按钮（back和forward）时，路由和组件会更改，但NavMenu活动选项卡不会更改。

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

Answer 1

我最初试图在没有运气的情况下实现这个答案。我现在有一个针对这个问题的有效解决方案。在我的导航组件中，我有一个el-menuwith :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;
    }
  },

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

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

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