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

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

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


vue.js vue-router element-ui
person briancaffey    schedule 13.12.2018    source источник

Ответы (2)


arrow_upward
7
arrow_downward

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

person briancaffey    schedule 13.12.2018
comment
вы добавляете эти методы в файл компонента, который имеет элемент el-menu? - person yoad w; 05.05.2019
comment
Работает как шарм! Спасибо.. - person Teddy; 20.03.2021
comment
В документе Element UI следует упомянуть, что для его работы в режиме маршрутизатора нужно немного потрудиться! - person Teddy; 20.03.2021

arrow_upward
2
arrow_downward

Было больно приступить к работе. Мне вообще не удалось заставить 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,
      });
    }
  }
person Timmmm    schedule 31.10.2019
comment
Именно то, что я искал, спасибо @Timmmm за спасение моего дня;) - person Chirag Khatri; 12.02.2021