Элемент пользовательского интерфейса NavMenu не синхронизируется с текущим маршрутом - PullRequest
Новая
       21

Элемент пользовательского интерфейса NavMenu не синхронизируется с текущим маршрутом

0 голосов
/ 13 декабря 2018

Я использую Element UI NavMenu с :router="true".Работает нормально, когда я нажимаю на ссылки меню (изменения маршрута и изменения активного пункта меню).У меня проблема в том, что когда я нажимаю на кнопки навигации браузера (back и forward), маршрут и компонент меняются, но активная вкладка NavMenu не меняется.

ЕстьЕсть ли простой способ убедиться, что NavMenu и текущий маршрут синхронизированы друг с другом при использовании кнопок навигации в браузере?Я использую vue-router с mode: 'history'.Я бы подумал, что это будет обработано автоматически.

1 Ответ

0 голосов
/ 14 декабря 2018

Изначально я пытался реализовать этот ответ , но безуспешно.Теперь у меня есть рабочее решение этой проблемы.В моем компоненте навигации у меня есть 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 изсинхронизировать при использовании кнопок навигации в браузере.

...