第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何通過(guò)路由路徑將類添加到導(dǎo)航項(xiàng)

如何通過(guò)路由路徑將類添加到導(dǎo)航項(xiàng)

浮云間 2022-12-22 11:59:42
我正在開(kāi)發(fā)一個(gè) vue.js 項(xiàng)目，在我的導(dǎo)航組件中，li 元素中有多個(gè)路由器鏈接，如下所示<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">     <i class="m-menu__link-icon flaticon-line-graph"></i>        <span class="m-menu__link-title">        <span class="m-menu__link-wrap">             <span class="m-menu__link-text">{{ $t("Dashboard") }}</span>        </span>        </span> </router-link></li>我想要做的是通過(guò)路由器鏈接路徑向 li 元素添加新類。使用手表屬性我可以獲得當(dāng)前路線，其余工作對(duì)我來(lái)說(shuō)似乎很難。手表屬性如下watch:{    $route (to, from){       console.log(to.path);       $('[to="'+path+'"]').parent().addClass('yourClass'); // i tried this way and it didn't work      }},*請(qǐng)注意，我不能通過(guò)點(diǎn)擊事件來(lái)完成，因?yàn)槲乙部梢允褂脙x表板瀏覽鏈接。請(qǐng)給我一個(gè)方法來(lái)做到這一點(diǎn)。謝謝你。
查看完整描述

2 回答

?
達(dá)令說(shuō)

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊

如果你想將一個(gè)類添加到你的活動(dòng)路由鏈接，只需使用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>請(qǐng)注意，您可以將組件呈現(xiàn)為<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">

     <i class="m-menu__link-icon flaticon-line-graph"></i>

        <span class="m-menu__link-title">

        <span class="m-menu__link-wrap">

             <span class="m-menu__link-text">{{ $t("Dashboard") }}</span>

        </span>

        </span>

 </router-link>

</li>

在你的組件 JS 中，你有兩個(gè)選擇：


data: () => ({

  isDashboardActive: false

}),

watch:{

    $route (to, from){

       console.log(to.path);

       this.isDashboardActive = true

    }

},


或這個(gè)


computed: {

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

  isDashboardActive () {

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

  }

},

另一種保持相同 html 結(jié)構(gòu)的選擇，依賴于活動(dòng)類：


<router-link

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

   aria-haspopup="true"

   id="dashboard"

   @click="toggleMenu('dashboard')"

   to="/dashboard"

   active-class="yourClass"

 >

 <a class="m-menu__link">

     <i class="m-menu__link-icon flaticon-line-graph"></i>

        <span class="m-menu__link-title">

        <span class="m-menu__link-wrap">

             <span class="m-menu__link-text">{{ $t("Dashboard") }}</span>

        </span>

        </span>

 </a>

</li>


查看完整回答
反對(duì) 回復(fù) 2022-12-22
?
喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

我可以像下面那樣做。


<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;

        }

     }

}


查看完整回答
反對(duì) 回復(fù) 2022-12-22
  • 2 回答
  • 0 關(guān)注
  • 127 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)