vue-router是vue單頁面開發(fā)的路由，就是決定頁面跳轉(zhuǎn)的！<router-link> 組件支持用戶在具體有路由功能的應(yīng)用中（點擊）導(dǎo)航。通過to屬性指定目標(biāo)地址。

1、to

表示目標(biāo)路由的鏈接。當(dāng)被點擊后，內(nèi)部會立刻把to的值傳到router-push()。

<router-link :to="‘home‘">Home</router-link>
<router-link :to="{ path: ‘home‘ }">Home</router-link>
//命名路由<router-link :to="{ name: ‘user‘, params: {userId: 123} }">Home</router-link>
//帶查詢參數(shù)，下面的結(jié)果為/register?plan=private--><router-link :to="{ path: ‘register‘, query: {plan: ‘private‘}}">Register</router-link>

2、replace

設(shè)置replace屬性的話，當(dāng)點擊時，會調(diào)用roter.replace()而不是router.push()，所以導(dǎo)航后不會留下history記錄，也就是不能回退到上一個頁面

<router-link :to="{path: ‘/abc‘}" replace>ABC</router-link>

3、append

設(shè)置append屬性后，則在當(dāng)前路徑前添加基路徑，例如，我們從/a導(dǎo)航到一個相對路徑b，如果沒有配置append，則路徑為/b，如果配了，則為/a/b

<router-link to="b" append>Home</router-link>

4、tag

有時候想要<router-link>渲染成某種標(biāo)簽，例如<li>。于是我們使用tag prop 類指定何種標(biāo)簽，同樣它還是會監(jiān)聽點擊，觸發(fā)導(dǎo)航。

<router-link to="/foo" tag="li">FOO</router-link>// 渲染結(jié)果 <li>FOO</li>

5、active-class

設(shè)置鏈接激活時使用的css類名。默認(rèn)值可以通過路由的構(gòu)造選項linkActiveClass來全局配置, 默認(rèn)值為 ‘router-link-active‘。

export default New Router({   linkActiveClass: ‘a(chǎn)ctive‘ })

6、exact

"是否激活"，默認(rèn)是false 。舉個粟子，如果當(dāng)前的路徑是/a 開頭的，那么<router-link to="/a"> 也會被設(shè)置css類名。

按照這個規(guī)則，<router-link to="/"> 將會點亮各個路由！想要鏈接使用"exact匹配模式"，則使用exact屬性：

// 這個鏈接只會在地址為 / 的時候被激活 <router-link to="/" exact>Home</router-link>
<router-link to="/user">USER</router-link>
<router-link to="/user/userinfo">USER-info</router-link>
// 如果不設(shè)置exact，則當(dāng)路由到了/user/userinfo 頁面時，USER也是被設(shè)置了router-link-active樣式的！

7、events

聲明可以用來觸發(fā)導(dǎo)航的事件（默認(rèn)是‘click‘）?？梢允且粋€字符串或者是一個包含字符串的數(shù)組。

8、將"激活時的css類名"應(yīng)用在外層元素

有時候我們要讓"激活的css類名"應(yīng)用在外層元素，而不是<a>標(biāo)簽本身，那么可以用<router-link>渲染外層元素，包裹著內(nèi)層的原生<a>標(biāo)簽。

<router-link tag="li" to="/foo">    <a>/foo</a></router-link>//在這種情況下，<a>將作為真實的鏈接（能獲取到正確的href的），而"激活時的css類名"則設(shè)置到外層的<li>

9、方法

router-link默認(rèn)是觸發(fā)router.push(location)，如果設(shè)置的replace 則觸發(fā)router.replace(location)，這有啥區(qū)別呢？

router.push() ：導(dǎo)航跑到不同的URL,這個方法會向history棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的url。

router.replace(): 跟router.push作用是一樣的，但是，它不會向history添加新記錄，而是跟它的方法名一樣替換掉當(dāng)前的history記錄。

router.go(n): 這個方法的參數(shù)是一個整數(shù)，意思是在history記錄中向前或者后退多少步，類似window.history.Go(n)。

學(xué)習(xí)更多技能

請點擊下方公眾號