vuejs <router-link> 组件使根路径的 link 始终处于活动状态

Question

我的导航是这样的

<nav>
    <ul class="nav nav-list">
         <router-link tag="li" to="/"><a href="#">Home</a></router-link>
         <router-link tag="li" to="/page1"><a href="#">Page1</a></router-link>
         <router-link tag="li" to="/page2"><a href="#">Page2</a></router-link>
    </ul>
</nav>

我希望第 1 页的 link 在任何时候都处于活动状态，第 1 页也是如此。它工作正常，当我导航到页面时 links 被激活但问题是 link 到根 (/) 页面始终处于活动状态，即使我离开页面。

Answer 1

根 link 始终处于活动状态，因为 Vue Router 部分匹配根 / 路径与当前路径。

要执行精确匹配，您可以：

向 router-link 添加 exact 属性：

<router-link tag="li" to="/" exact>
    <a href="#">
        Home
    </a>
</router-link>

在 linkExactActiveClass router constructor option 中设置您的活动 class 而不是 linkActiveClass。

vuejs <router-link> 组件使根路径的 link 始终处于活动状态

vuejs <router-link> component keeps the link to the root path always active

vue.js

vue-router

routerlink