在 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

  :to="{name:'link-1'}"

  v-slot="{ href, route, navigate, isActive, isExactActive }"

>

  <li

    :class="[isActive && 'active', isExactActive && 'exact-active']"

  >

    <a :href="href" @click="navigate">Link 1</a>

  </li>

</router-link>

<router-link

  :to="{name:'link-2'}"

  v-slot="{ href, route, navigate, isActive, isExactActive }"

>

  <li

    :class="[isActive && 'active', isExactActive && 'exact-active']"

  >

    <a :href="href" @click="navigate">Link 2</a>

  </li>

</router-link>

如果您不需要.activeli 元素，<router-link>请内置此内容。（请参阅 Dan 的 awnswer）

Answer 2

Vue 路由器提供了这个功能。当链接处于活动状态时，它将应用router-link-exact-active类。

在你的 CSS 中：

.router-link-exact-active {
  // styles here
}

还有router-link-activewhich 会同时匹配“/”和“/link-1”。