首頁猿問如何通過路由路徑將類添加到導航項

如何通過路由路徑將類添加到導航項

JavaScript

浮云間 2022-12-22 11:59:42

我正在開發一個 vue.js 項目，在我的導航組件中，li 元素中有多個路由器鏈接，如下所示<li class="m-menu__item m-menu__item--active" aria-haspopup="true" id="dashboard" @click="toggleMenu('dashboard')" > <router-link to="/dashboard" class="m-menu__link"> {{ $t("Dashboard") }} </router-link></li>我想要做的是通過路由器鏈接路徑向 li 元素添加新類。使用手表屬性我可以獲得當前路線，其余工作對我來說似乎很難。手表屬性如下watch:{ $route (to, from){ console.log(to.path); $('[to="'+path+'"]').parent().addClass('yourClass'); // i tried this way and it didn't work }},*請注意，我不能通過點擊事件來完成，因為我也可以使用儀表板瀏覽鏈接。請給我一個方法來做到這一點。謝謝你。

查看完整描述

2 回答

達令說

TA貢獻1821條經驗獲得超6個贊

如果你想將一個類添加到你的活動路由鏈接，只需使用active-classorexact-active-class屬性https://router.vuejs.org/api/#active-class：

<router-link

to="/dashboard"

class="m-menu__link"

active-class="yourClass"

</router-link>

<route-link>請注意，您可以將組件呈現為<li>元素，因此只需將 li 類添加到 router-link 組件

編輯

<li

class="m-menu__item m-menu__item--active"

aria-haspopup="true"

id="dashboard"

@click="toggleMenu('dashboard')"

:class="{ 'my-active-class': isDashboardActive }"

<router-link to="/dashboard" class="m-menu__link">

{{ $t("Dashboard") }}

</router-link>

</li>

在你的組件 JS 中，你有兩個選擇：

data: () => ({

isDashboardActive: false

}),

watch:{

$route (to, from){

console.log(to.path);

this.isDashboardActive = true

}

或這個

computed: {

// if you use computed, you can remove data and watch

isDashboardActive () {

return this.$route.path === '/dashboard'

}

另一種保持相同 html 結構的選擇，依賴于活動類：

<router-link

class="m-menu__item m-menu__item--active"

aria-haspopup="true"

id="dashboard"

@click="toggleMenu('dashboard')"

to="/dashboard"

active-class="yourClass"

{{ $t("Dashboard") }}

</a>

</li>

反對回復 2022-12-22

喵喵時光機

TA貢獻1846條經驗獲得超7個贊

我可以像下面那樣做。

<li

class="m-menu__item"

:class="checkIsPathAndRoutePathSame('/dashboard') ? 'm-menu__item--active' : ''"

id="dashboard"

@click="toggleMenu('dashboard')"

<router-link to="/dashboard" class="m-menu__link">

</router-link>

</li>

data() {

return {

currentRoute: ''

};

watch:{

$route (to, from){

this.currentRoute = to.path;

}

mounted() {

this.currentRoute = this.$route.path;},

methods: {

checkIsPathAndRoutePathSame(path){

if(this.currentRoute === path){

return true;

}

反對回復 2022-12-22

2 回答
0 關注
121 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

如何通過路由路徑將類添加到導航項

如何通過路由路徑將類添加到導航項

2 回答

添加回答