VUE，關(guān)于導(dǎo)航列表樣式切換（VUE Router：router-link-active）

figofuture 發(fā)布于2019-08-29 12:24 / 1175人閱讀

摘要：在自己入門學(xué)習(xí)的筆記中也有提及第一種中我們通常采用將當(dāng)前選中的項(xiàng)目解除被選中的樣式為選中的條目添加被選中的樣式非常簡便，需要，并在中配置。但學(xué)，還是用其本身的與綁定最好。第四種也是最官方，最簡單的。

當(dāng)我們新建一個(gè)網(wǎng)站時(shí)，總是要做一個(gè)導(dǎo)航列表，在傳統(tǒng)的WEB開發(fā)中這已經(jīng)是一種很成熟的技術(shù)，自己學(xué)VUE，看了官方文檔，加上自己摸索，也學(xué)到不少，現(xiàn)在拿來分享一下。在自己VUE入門學(xué)習(xí)的筆記中也有提及
第一種：JQUERY中我們通常采用:
$("li[class="active"]").removeClass("active"); //將當(dāng)前選中的項(xiàng)目解除被選中的樣式；
$(selector).addClass("active");//為選中的條目添加被選中的樣式；
非常簡便，需要npm install jquery，并在baseConfig中配置。但學(xué)VUE，還是用其本身的Class 與 Style 綁定最好。
第二種：VUE中沒有選擇器，但對于CSS屬性支持狀態(tài)關(guān)聯(lián)操作（Class 與 Style 綁定）：
eg：v-bind:class="{ active: isActive }"
解讀：當(dāng)isActive值為真時(shí)，active樣式有效，Dom渲染結(jié)果是：class=“active”
當(dāng)為false時(shí)，active樣式無效，Dom渲染結(jié)果是：class=“”
因此我們可以利用這個(gè)屬性做文章
標(biāo)簽HTML：

這條語句我們生成了一個(gè)列表，并為其綁定了一個(gè)選中事件，為class動(dòng)態(tài)綁定了一個(gè)判斷事件
同樣我們在選擇這個(gè)事件中：
function selected(seclctedName){
this.activeName= seclctedName;
}
數(shù)據(jù)屬性：

data(){
    return{
        tagNames:[
            {name:"hello",tabLink:"/Hello"},
            {name:"Login",tabLink:"/Login"},
            {name:"MyBlog",tabLink:"/MyBlog"}
        ],
        activeName:"hello" //當(dāng)activeName初始值為空時(shí)，瀏覽器加載時(shí)默認(rèn)沒有選擇的列表項(xiàng)，當(dāng)為hello時(shí)，hello列表默認(rèn)被選中
    }
},

初看運(yùn)行起來還可以，切換也正常，但當(dāng)我們停留在非HELLO頁面時(shí)，刷新頁面，hello被選中了，而刷新前的選中樣式被解除了，這是因?yàn)槲覀優(yōu)閍ctiveName:"hello" 賦了初值。所以有BUG。
第三種：思路同二，但activeName,我新建導(dǎo)航樣式列表組件時(shí)，我為其定義了一個(gè)TITLE屬性
props: {

  title: {
      type: String,
       default: "any"
        }
  }

并在列表中使用:class="{active:title== tabbarName.name}來綁定active CSS，
當(dāng)其他頁面調(diào)用這個(gè)組件時(shí)，指定TITLE，比如：、

這是當(dāng)切換到MyBlog時(shí)，他就會被選中，隨便刷新，都沒有方法二的情況出現(xiàn)。

第四種：也是最官方，最簡單的。自己當(dāng)時(shí)看VUEROUTER，因?yàn)榭粗媸欤吹谋容^快，所以錯(cuò)過了這個(gè)知識點(diǎn)，開始頁的最下面有這樣一句話：當(dāng) 對應(yīng)的路由匹配成功，將自動(dòng)設(shè)置 class 屬性值 .router-link-active，所以你只需要在自己的STYLE文件中，寫了.router-link-active的樣式，列表選中后，系統(tǒng)就會自動(dòng)去綁定這個(gè)樣式。此處應(yīng)該有很多個(gè)錘頭掩面的表情*。

然后