VUE，關於導航列表樣式切換（VUE Router：router-link-active）

當咱們新建一個網站時，老是要作一個導航列表，在傳統的WEB開發中這已是一種很成熟的技術，本身學VUE，看了官方文檔，加上本身摸索，也學到很多，如今拿來分享一下。在本身VUE入門學習的筆記中也有說起
第一種：JQUERY中咱們一般採用:
$("li[class='active']").removeClass("active"); //將當前選中的項目解除被選中的樣式；
$(selector).addClass('active');//爲選中的條目添加被選中的樣式；
很是簡便，須要npm install jquery，並在baseConfig中配置。但學VUE，仍是用其自己的Class 與 Style 綁定最好。
第二種：VUE中沒有選擇器，但對於CSS屬性支持狀態關聯操做（Class 與 Style 綁定）：
eg：v-bind:class="{ active: isActive }"
解讀：當isActive值爲真時，active樣式有效，Dom渲染結果是：class=「active」
當爲false時，active樣式無效，Dom渲染結果是：class=「」
所以咱們能夠利用這個屬性作文章
標籤HTML：<li v-for:"tagName of tagNames" v-bind:class={active:activeName==tagName} v-on:click="selected(tagName)">
這條語句咱們生成了一個列表，併爲其綁定了一個選中事件，爲class動態綁定了一個判斷事件
一樣咱們在選擇這個事件中：
function selected(seclctedName){
this.activeName= seclctedName;
}
數據屬性：

data(){
    return{
        tagNames:[
            {name:'hello',tabLink:'/Hello'},
            {name:'Login',tabLink:'/Login'},
            {name:'MyBlog',tabLink:'/MyBlog'}
        ],
        activeName:'hello' //當activeName初始值爲空時，瀏覽器加載時默認沒有選擇的列表項，當爲hello時，hello列表默認被選中
    }
},

初看運行起來還能夠，切換也正常，但當咱們停留在非HELLO頁面時，刷新頁面，hello被選中了，而刷新前的選中樣式被解除了，這是由於咱們爲activeName:'hello' 賦了初值。因此有BUG。
第三種：思路同二，但activeName,我新建導航樣式列表組件時，我爲其定義了一個TITLE屬性
props: {

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

並在列表中使用:class="{active:title== tabbarName.name}來綁定active CSS，
當其餘頁面調用這個組件時，指定TITLE，好比： 、
<v-header title="MyBlog">
</v-header>
這是當切換到MyBlog時，他就會被選中，隨便刷新，都沒有方法二的狀況出現。

第四種：也是最官方，最簡單的。本身當時看VUEROUTER，由於看着面熟，看的比較快，因此錯過了這個知識點，開始頁的最下面有這樣一句話：當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active，因此你只須要在本身的STYLE文件中，寫了.router-link-active的樣式，列表選中後，系統就會自動去綁定這個樣式。此處應該有不少個錘頭掩面的表情*。

而後