vue安裝，router-link的一些屬性及用法

vue安裝，router-link的一些屬性及用法

 

第一步：$ npm install -g vue-cli

第二部：$ vue init webpack my-projectName

 下面內容轉載自：https://www.cnblogs.com/chengjunL/p/6282125.html

在vue1.0版本的超連接標籤仍是原來的a標籤，連接地址由v-link屬性控制

而vue2.0版本里超連接標籤由a標籤被替換成了router-link標籤，但最終在頁面仍是會被渲染成a標籤的

至於爲何要把a換成router-link緣由仍是有的，好比咱們以前一直慣用的nav導航裏面結構是（ul>li>a），touter-link能夠渲染爲任何元素，這裏能夠直接渲染成li標籤，一樣能實現跳轉效果，節省了a標籤的使用，還有一個緣由多是由於a標籤正常是連接的跳轉的做用，點擊a時可能會重載頁面，使用router-link，此標籤會被vue所監聽，跳轉連接時就不會刷新頁面了。固然這我的理解，不對之處有望指正。

"router-link"屬性

1.":to" 屬 性

至關於a標籤中的"herf"屬性，後面跟跳轉連接所用

<router-link :to="/home">Home</router-link>
<!-- 渲染結果 -->
<a href="/home">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會自動爲其綁定點擊事件，並跳轉頁面

例子見下圖：

<router-link tag="li" to="/about0">
　　About0
</router-link>

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
})

也能夠在樣式文件中寫：

.router-link-active{
　　background-color:red;
}

截圖例子是爲了講解清楚：

 

5."exact" 屬 性

開啓router-link的嚴格模式

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

上面這個標籤若是不加exact屬性，則會在vue2.leenty.com/article頁面下也會被匹配到，
這卻不是咱們的本意,在加了這個屬性後就會正確的匹配到vue2.leenty.com下