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，则按预期，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>

我的router.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>

如果没有，您应该发布一些组件和路由器的代码，以帮助发现问题。

Vue，活动路由器链接在第一次更改后未更新

1 个答案: