Vue，活动路由器链路在首次更改后未更新

Question

我有一个奇怪的问题，我挣扎了很长时间......我有一个带有多个路由器链接的侧边栏。

<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 将保持活动状态，新页面不会变为活动状态。也就是说，我将能够导航到其他页面，但无论我做什么，/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>

我的路由器.js从

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

Answer 1

很确定你的模板中不应该有多个router-view。您能否删除这些/用实际组件替换它们，看看是否可以解决问题？像这样：

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

如果没有，您应该发布更多组件和路由器的代码，以帮助确定问题。