vue-router各個屬性的作用及用法

原文：https://www.cnblogs.com/goloving/p/9211358.html

 

　　vue-router是vue單頁面開發的路由，就是決定頁面跳轉的！

　　<router-link> 組件支持用戶在具體有路由功能的應用中（點擊）導航。通過to屬性指定目標地址。

Props 屬性

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>

//帶查詢參數，下面的結果為/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 類指定何種標簽，同樣它還是會監聽點擊，觸發導航。

<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: ‘active‘ 
})

6、exact

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

　　按照這個規則，<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

　　聲明可以用來觸發導航的事件（默認是‘click‘）。可以是一個字符串或者是一個包含字符串的數組

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

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

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

9、方法

　　router-link默認是觸發router.push(location)，如果設置的replace 則觸發router.replace(location)，這有啥區別呢？

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

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

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