Vue, активная ссылка маршрутизатора не обновляется после первого изменения - PullRequest
Новая
       2

Vue, активная ссылка маршрутизатора не обновляется после первого изменения

1 голос
/ 02 июня 2019

У меня странная проблема, с которой я долго боролся ... У меня есть боковая панель с несколькими роутер-ссылками. 

<template>
  <div class="nav nav-pills main-nav" id="sidebar" role="tablist">
    <router-link class="nav-link" to="/tasks">
      Tasks
    </router-link>
    <router-link class="nav-link" to="/notes">
      Notes
    </router-link>
    <router-link class="nav-link" to="/sounds">
      Sounds
    </router-link>
    <div class="account">
      <router-link class="nav-link" to="/profile">
        Profile
      </router-link>
      <a class="nav-link" @click="logOut">
        Log out
      </a>
    </div>
  </div>
</template>
<script>
export default {
  name: "sidebar",
  methods: {
    ...
  }
};
</script>

У меня странная проблема с поведением последнего меню. Если я перехожу к localhost: 8080 / notes, кнопка заметок активна, как и ожидалось. Затем, если я нажму на любую другую ссылку (скажем, / задачи), она станет активной, как и ожидалось. Однако, если я снова нажму на какую-нибудь ссылку, / tasks останется активным, а новая страница не станет активной. То есть я смогу перейти на другие страницы, но ссылка роутера / tasks будет активна, что бы я ни делал. Другими словами, «активная» ссылка обновляется только один раз ... Я понятия не имею, в чем может быть проблема: / Любые предложения с благодарностью!

В App.vue я импортирую боковую панель 

  <div id="app">
    <router-view name="header"></router-view>
    <router-view name="sidebar"></router-view>
    <main :class="{ 'remove-width': sidebarOpened }">
      <fade-transition origin="center" mode="out-in" :duration="250">
        <router-view />
      </fade-transition>
    </main>
  </div>

Мой router.js начинается с 

let router = new Router({
  mode: "history",
  linkExactActiveClass: "exact-active",
  linkActiveClass: "active",
  base: process.env.BASE_URL,

1 Ответ

0 голосов
/ 02 июня 2019

Уверен, у вас не должно быть нескольких router-view в вашем шаблоне. Вы можете удалить их / заменить их фактическими компонентами и посмотреть, решит ли это проблему? Как то так: 

<div id="app">
  <AppHeader />
  <AppSidebar />
  <main>
  <fade-transition>
    <router-view>
  </fade-transition>
  </main>
</div>

Если этого не произойдет, вы должны опубликовать немного больше кода ваших компонентов и маршрутизатора, чтобы помочь выявить проблему.

...