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

1、to

表示目標(biāo)路由的鏈接。 當(dāng)被點(diǎn)擊后，內(nèi)部會(huì)立刻把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>
// 帶查詢(xún)參數(shù)，下面的結(jié)果為/ register?plan=private -->
<router-link :to="{ path:'register', query: { plan:'private' } }" >Register</router-link>

2、replace

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

<router-link :to="{path: '/abs'}"  replace>ABC</router-link>

3、append

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

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

4、tag

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

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

5、 active-class

設(shè)置鏈接激活時(shí)使用的css類(lèi)名。默認(rèn)值可以通過(guò)路由的構(gòu)造選項(xiàng)linkActiveClass來(lái)全局配置， 默認(rèn)值為'router-link-active'。

export default New Router({
  linkActiveClass: 'active'
})

6、exact

“是否激活”，默認(rèn)是false。 舉個(gè)例子，如果當(dāng)前的路徑是/a開(kāi)頭的， 那么<router-link to="/a">也會(huì)設(shè)置css類(lèi)名。
按照這個(gè)規(guī)則， <router-link to="/">將會(huì)點(diǎn)亮各個(gè)路由！想要連接使用"exact匹配模式"，則使用exact屬性：

// 這個(gè)鏈接只會(huì)在地址為 / 的時(shí)候被激活
<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頁(yè)面時(shí)， USER也是被設(shè)置了router-link-active樣式的！

7、events

聲明可以用來(lái)觸發(fā)導(dǎo)航的事件（默認(rèn)是'click'）。 可以是一個(gè)字符串或者是一個(gè)包含字符串的數(shù)組。

8、將"激活時(shí)的css類(lèi)名應(yīng)用在外出元素"

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

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

9、方法

router-link默認(rèn)是觸發(fā)router.push(location), 如果設(shè)置的replace 則觸發(fā)router.replace(location),這有啥區(qū)別呢？
router.push(): 導(dǎo)航跑到不同的URL，這個(gè)方法會(huì)向history棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的url。
router.replace(): 跟router.poush作用是一樣的， 但是， 它不會(huì)向histrory添加新記錄,而是跟它的方法名一樣替換掉當(dāng)前地history記錄。
router.go(n): 這個(gè)方法的參數(shù)是一個(gè)整數(shù)， 意思是在history記錄中向前或者后退多少步，類(lèi)似window.history.Go(n)。