在 vue.js 中根据 url 将类 active 添加到路由器链接

Question

我有这样的链接：

 <li class="list-item active"> <router-link :to="{name:'link-1'}"> Link 1</router-link>
 <li class="list-item"> <router-link :to="{name:'link-2'}"> Link 2</router-link>

我想根据 url 假设 url 是 localhost:8000/link-1 那么 link-1 应该是活动的，用列表项类添加活动类。

Answer 1

如果你使用的是 Vue Router > 3.1.0，你可以<router-link>为此使用一个作用域插槽：<router-link&nbsp; :to="{name:'link-1'}"&nbsp; v-slot="{ href, route, navigate, isActive, isExactActive }">&nbsp; <li&nbsp; &nbsp; :class="[isActive && 'active', isExactActive && 'exact-active']"&nbsp; >&nbsp; &nbsp; <a :href="href" @click="navigate">Link 1</a>&nbsp; </li></router-link><router-link&nbsp; :to="{name:'link-2'}"&nbsp; v-slot="{ href, route, navigate, isActive, isExactActive }">&nbsp; <li&nbsp; &nbsp; :class="[isActive && 'active', isExactActive && 'exact-active']"&nbsp; >&nbsp; &nbsp; <a :href="href" @click="navigate">Link 2</a>&nbsp; </li></router-link>如果您不需要.activeli 元素，<router-link>请内置此内容。（请参阅 Dan 的 awnswer）

Answer 2

Vue 路由器提供了这个功能。当链接处于活动状态时，它将应用router-link-exact-active类。在你的 CSS 中：.router-link-exact-active&nbsp;{ &nbsp;&nbsp;//&nbsp;styles&nbsp;here }还有router-link-activewhich 会同时匹配“/”和“/link-1”。