"router-link"的屬性

在vue1.0版本的超連結标簽還是原來的a标簽，連結位址由v-link屬性控制

而vue2.0版本裡超連結标簽由a标簽被替換成了router-link标簽，但最終在頁面還是會被渲染成a标簽的

至于為什麼要把a換成router-link原因還是有的，比如我們之前一直慣用的nav導航裡面結構是（ul>li>a），router-link可以渲染為任何元素，這裡可以直接渲染成li标簽，同樣能實作跳轉效果，節省了a标簽的使用，還有一個原因可能是因為a标簽正常是連結的跳轉的作用，點選a時可能會重載頁面，使用router-link，此标簽會被vue所監聽，跳轉連結時就不會重新整理頁面了。當然這個人了解，不對之處有望指正。

“router-link"屬性

1.”:to" 屬 性

相當于a标簽中的"herf"屬性，後面跟跳轉連結所用

<router-link :to="/home">Home</router-link>
           

<a href="/home" target="_blank" rel="external nofollow" >Home</a>
           

2.“replace” 屬 性

replace在routre-link标簽中添加後，頁面切換時不會留下曆史記錄

<router-link :to="/home" replace></router-link>
           

3.“tag” 屬 性

具有tag屬性的router-link會被渲染成相應的标簽

<router-link :to="/home" tag="li">Home</router-link>
           

<li>Home</li>
           

此時頁面的li同樣會起到a連結跳轉的結果，vue會自動為其綁定點選事件，并跳轉頁面

4.“active-class” 屬 性

這個屬性是設定激活連結時class屬性，也就是目前頁面所有與目前位址所比對的的連結都會被添加class屬性

<router-link :to="/home" active-class="u-link--Active">Home</router-link>
           

active-class屬性的預設值是router-link-active,是以如果沒有設定，就會被渲染為這個class

可以在router.js裡面設定

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 這是連結激活時的class
})
           

5.“exact” 屬 性

開啟router-link的嚴格模式

<router-link :to="/" exact>home</router-link>
           

上面這個标簽如果不加exact屬性，則會在vue2.leenty.com/article頁面下也會被比對到，

這卻不是我們的本意,在加了這個屬性後就會正确的比對到vue2.leenty.com下