vue.js - Element UI NavMenu 与当前路线不同步

Question

我正在使用 Element 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上面链接的要点中描述的属性:

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

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

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

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