已解決430363個問題，去搜搜看，總會有你想問的

在 vue.js 中根據 url 將類 active 添加到路由器鏈接

首頁猿問在 vue.js 中根據 url...

在 vue.js 中根據 url 將類 active 添加到路由器鏈接

JavaScript

慕森卡 2023-06-15 16:25:13

我有這樣的鏈接： <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 應該是活動的，用列表項類添加活動類。

查看完整描述

2 回答

德瑪西亞99

TA貢獻1770條經驗獲得超3個贊

如果你使用的是 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']"

</li>

</router-link>

<router-link

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

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

<li

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

</li>

</router-link>

如果您不需要.activeli 元素，<router-link>請內置此內容。（請參閱 Dan 的 awnswer）

反對回復 2023-06-15

慕標琳琳

TA貢獻1830條經驗獲得超9個贊

Vue 路由器提供了這個功能。當鏈接處于活動狀態時，它將應用router-link-exact-active類。

在你的 CSS 中：

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

還有router-link-activewhich 會同時匹配“/”和“/link-1”。

反對回復 2023-06-15

2 回答
0 關注
188 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 vue.js 中根據 url 將類 active 添加到路由器鏈接

在 vue.js 中根據 url 將類 active 添加到路由器鏈接

2 回答

添加回答