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

1、to

表示目標路由的鏈接。當被點擊后，內部會立刻把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ù)，下面的結果為/register?plan=private--><router-link :to="{ path: ‘register‘, query: {plan: ‘private‘}}">Register</router-link>

2、replace

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

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

3、append

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

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

4、tag

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

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

5、active-class

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

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

6、exact

"是否激活"，默認是false 。舉個粟子，如果當前的路徑是/a 開頭的，那么<router-link to="/a"> 也會被設置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>
// 如果不設置exact，則當路由到了/user/userinfo 頁面時，USER也是被設置了router-link-active樣式的！

7、events

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

8、將"激活時的css類名"應用在外層元素

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

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

學習更多技能

請點擊下方公眾號