2 回答

TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
如果你使用的是 Vue Router > 3.1.0,你可以<router-link>為此使用一個(gè)作用域插槽:
<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>
如果您不需要.active
li 元素,<router-link>
請(qǐng)內(nèi)置此內(nèi)容。(請(qǐng)參閱 Dan 的 awnswer)

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊
Vue 路由器提供了這個(gè)功能。當(dāng)鏈接處于活動(dòng)狀態(tài)時(shí),它將應(yīng)用router-link-exact-active
類。
在你的 CSS 中:
.router-link-exact-active { // styles here }
還有router-link-active
which 會(huì)同時(shí)匹配“/”和“/link-1”。
添加回答
舉報(bào)