摘要：當值為，而瀏覽器并不支持時，會自動降級為模式布爾值默認值為，該值只是在值為時生效。布爾值默認值為，當該值為，在組件路由切換鉤子中產生的異常不會被拋出。當該被匹配是，地址欄的為布爾值默認值為，當該值為時，此次導航不會產生歷史記錄。

Vue和vue-router 創建 SPA 應用。

vue-router 作用. 通過路由規則，渲染各自的組件。
Vue開發，整個應用已經被拆分成了獨立的組件。在使用vue-router時，把路由映射到各個組件。vue-router 把各個組件渲染到正確的地方。

使用的版本：0.7.13

vue-reouter是Vue的一個插件，需要使用Vue.use()來注冊插件。注冊到Vue對象上。在vue-router內部會檢測window.Vue對象是否存在。
Vue對象并不會暴露到全局window對象中，而是通過module.exports形式輸出，因此需要使用者手動注冊。

    
    

        

            HOME
            Page
        
        
        
    

    
    
    

僅有路由跳轉需要不夠，很多情況下，在同一個頁面上，多標簽頁的切換，在vue-router 中，用嵌套路由。

vue-router 對路勁匹配是支持動態片段，全匹配片段，以及查詢參數( 片段指是的 URL 中的一部分 )。
對于解析過的路由，這些信息都可以通過路由上下文對象訪問。 賦值給 this.$route，并且當路由切換時，路由對象會自動更新。

$route object

$route.path
返回字符串，返回當前路徑 /page1/imgs

$route.params
返回對象

$route.quer
返回對象 ，路由中查詢參數，get請求的鍵值對

$route.router
路由規則所屬的路由組件

$route.matched
返回數組，當前匹配的路徑中所有的路徑規則.

{ "0": { "handler": { "subRoutes": { "/news": { "path": "/news", "fullPath": "/page1/news" }, "/imgs": { "path": "/imgs", "fullPath": "/page1/imgs" } }, "path": "/page1", "fullPath": "/page1" }, "params": {}, "isDynamic": false }, "1": { "handler": { "path": "/imgs", "fullPath": "/page1/imgs" }, "params": {}, "isDynamic": false }, "queryParams": { "a": "b" }, "length": 2 }

$route.name
返回當前路徑的名字

動態片段

語法：: 冒號開頭的路徑片段定義。

router.map({
    "/": {
        component: {
            template: "
主頁
"
        }
    },
    "/page1/:name": {
        component: Page1,
    }        
});

"/page1/:name" 中的name 可以匹配任意字段. 例如： /page1/:news, /page1/:imgs

全匹配片段

動態片段只能匹配路徑中的一個部分，而全匹配片段是貪婪模式。

router.map({
    "/": {
        component: {
            template: "
主頁
"
        }
    },
    "/news/*any": {
        component: News,
    }
});    

"/news/*any" 可以匹配例如：/news/a/b/c,/news/a/b
/foo/*any/bar 可以匹配 例如： /foo/a/b/bar

語法： router.map(); 匹配規則， View視圖需要 通過v-link 鏈接到該規則。 也可以通過 router.go(); 來切換到路徑中。
作用： 給匹配路徑規則添加一個名字，更好操作。

用戶名

實例化VueRouter時可以出啊如一個可選的VueRouterConfig路由選項對象來自定義路由器的行為。返回rotuer路由器實例，router實例暴露了一些實例屬性和實例方法，可以用來控制整個路由應用。

// 路由實例  
var router = new VueRouter({
    hashbang: true, // 將路徑中的 `#!` --> `#`
//    history: true, // 設置true 后，啟用HTML5 history模式。通過 history.pushState() 和 history.replaceState() 來管理瀏覽歷史記錄。
    abstract: true, // 使用一個不依賴與瀏覽器的瀏覽歷史虛擬管理后臺。虛擬模式在測試或實際的URL 不重要的時候。
    transitionOnLoad: true // 在初次加載時是否對 處理場景切換效果。 默認情況下，組件在初次加載時會直接渲染。 
});

路由選項

hahsbang (布爾值)

默認值為true。當該值為true時，表示匹配的路由在瀏覽器地址欄中以hash模式顯示。例如：假設當前瀏覽器地址欄中的地址為:http://example.com/path?query,當用戶點擊home鏈接時，瀏覽器地址欄中地址會顯示為：http://example.com/path?query#!/home

history （布爾值）

默認值為false。當該值為true時，會以HTML5 history API 進行導航。

注意：

假如當前頁面地址欄為：http://example.com/home，而在路由配置中配置了/home/weblcome路徑，那么當用戶直接訪問http://examle.com/home/welcome路徑時，服務器端應確保返回http://example.com/home 頁面，而不是http://example.com/home/weblcom頁面。否則可能出現/home/welcome頁面不存在而返回404錯誤。

當history值為true，不存hashbang值是否為true，總會以history模式進行導航。

當history值為true，而瀏覽器并不支持HTML5 history API 時，vue-rotuer會自動降級為hashbang模式

saveScrollPosiiton (布爾值)

默認值為false，該值只是在history值為true時生效。當該值設置為true時，在點擊瀏覽器后按退按鈕時頁面會定位到上一次該路由對應的視圖所在位置。

transitionOnLoad (布爾值)

默認值false，當該值為true是，在頁面第一次加載時rotuer-view會有路由切換動畫，默認為直接渲染。

suppressTransitionError (布爾值)

默認值為false， 當該值為true，在組件路由切換鉤子中產生的異常不會被拋出。

linkActiveClass (字符串)

默認值為v-link-active， 表示 v-link 所在元素處于激活狀態時 vue-router加在該元素上的類名。

root (字符串)

默認值 null， 該值只在history值為true時，生效。定義路由根路徑，所有路徑被匹配時，瀏覽器地址欄URL會顯示為根路徑+匹配路徑。

路由實例屬性

app (根組件實例)

vue-rotuer 應用的根Vue實例，由調用 router.satrt(App, "#app"); 時傳入的組件構造器App創建得到。

mode（字符串）

可能值有html5,hash,abstract

html5: 當創建rotuer實例時，所有配置對象history值為true，并且瀏覽器支持HTML5 histroy API時。

hash ： 當創建rotuer實例時，所傳配置hash值為true，或者history值為true，當時瀏覽器不支持HTML history API時。

abstract: 當宿主環境中沒有window對象(例如非瀏覽器環境)時，會自動退出此模式。

用于渲染匹配的組件，基于Vue的動態組件系統，繼承了一個動態組件的特性。

傳遞props

中的HTML內容被插入到相應的組件中

v-ref 父子組件通信

被渲染的組件會注冊到父級組件的 this.$ 對象中。

視圖部分用來展示匹配路由的模板內容，在vue-router中使用router-view 來渲染匹配的組件。 router-view 是一個Vue 組件。
特性：

通過props來傳遞數據

支持v-transition和transitin-mode.

支持v-ref，被渲染的組件會注冊到父級組件的this.$對象中

支持solt，router-view中的HTML內容會被插入到相應的路由組件模板的slot中。

v-link 是用戶操作的時候，來匹配不同的路徑。 用戶點擊的時候， 會調用 router.go()

Home


Home


用戶名

v-link 會自動設置 的 href 屬性

HOME

Vue.component("app", {
    data: {
        homeLinkMap: {
            path: "/home"
        }
    }
});

當v-link解析后的值是對象時，該對象可以有屬性有：

params(對象)

包含路由中的動態片段和全匹配片段的鍵值對。

query(對象)

包含路由中的添加到路勁path后的鍵值對。

Home

當該path被匹配是，地址欄的URL為：/home?isAuthed=true

replace(布爾值)

默認值為false，當該值為true時，此次導航不會產生歷史記錄。當用戶點擊的時候，會觸發 `router.replace()`函數，而不是默認的 `router.go()`。作用：產生的跳轉不會留下歷史記錄

append(布爾值)

默認值false。當該值為true時，如果此次導航的目的path為相對路徑，則實際URL中的路徑是當前path后拼接目的path。

例如：當前path為/a，

b

/a/b

activeClass(字符串)
默認值為v-link-active,值擔憂v-link指令的a元素處于激活狀態是的class名稱。該值也可以在創建路由器實例通過選項的 linkActiveClass 屬性來進行全局設置。

path 設置字面量路徑

Home

name和params 具名路徑

用戶名

exact 匹配是否完全一致

注意：使用 v-link而不是href來設置URL。
原因：

v-link是Vue指令，它會根據它的值來設置href的值。

在hash模式和 HTML5 history模式下，vue-router會同意行為，這樣在改變模式時不需要做任何改變。

在HTML5 history模式下，v-link執行會監聽點擊事件，防止瀏覽器重新加載頁面。

在HTML5 history模式下，如果使用root選項，不需要在v-link的path中包含root路徑。

在Vue1.0綁定語法中，不支持Mustache插值標簽，可以好似用常規的JavaScript表達式代替，例如：v-link=""user"/+user.name".

用來提供啟動，路由映射，重定向，路由切換全局鉤子。

router.start(App, el);
啟動一個路由程序，創建一個App的實例并掛載到元素el上。

參數：
App(函數/對象)
App可以是一個Vue組件構造器或者組件選項對象，當為組建選項對象時，在vue-rotuer內部會調用Vue.extend來創建App構造器。
el（字符串/DOM元素）
el可以是一個CSS選擇器或者DOM元素，用來掛載路由應用的跟組件。

router.stop();

停止監聽 popstate 和 hashchange 事件

當路由處于停止狀態， router.app 并沒有銷毀， 依然 可以使用 router.go(path) 進行跳轉。也可以不使用參數調用 router.start() 來重新啟動路由。

router.map(routerMap);

批量定義路由映射規則，內部調用router.on方法實現。

參數routerMap對象愛過你，鍵為路徑，值為路由配置對象。在vue-router內部會對routerMap對象中的每個鍵值調用router.on();方法來進行路由映射，

路由配置對象字段
componet，當路徑匹配時，會渲染到頂級的Vue組件。
值可以是 Vue.extend() 后返回的構造函數， 或者Vue.component()
subRoutes 嵌套的子路由映射。 匹配成功后組件會渲染到父級組件的 中。

router.on(path, config);
添加一條頂級的路由配置
參數：
path(字符串)
要匹配到路徑。
config(對象)
路由配置對象

在內部實現時，router.map(path, config); 對于接收到的路由映射對象中每個鍵值對調用router.on();

router.on("/user/:userId", {
  component: {
    template: "
 {{$route.params.userId}} 
"
  }
})

router.go(path);
導航到一個指定path的路由。
參數：
path(字符串、對象)
當path為字符串時，會當作普通路徑來解析，如果路由是相對路徑(不以"/"開頭)，則會以相對于當前路徑的方式進行解析。
當path為對象時，對象中只包含path屬性:

{ path: "/a/b" }

或者

{
    name: "order",
    parmas: {id: 1},
    query: {fieldName: "address"}
}

當path為對象時，兩種格式都可支持可選的 replace 和 append 屬性：

replace 布爾類型，默認值為false。當該值為true，跳轉不產生新的歷史記錄。
append 布爾類型，默認值為false。 當該值為true，假如要跳轉的路徑是相對路徑，則實際路徑是當前路勁拼接要跳轉的錄幾個。假設當前路徑為/a,目的路徑為b，當append值為false時，則實際跳轉后路徑為/b，為true時，則實際跳轉后路徑為/a/b.

router.replace(path);
導航一個新路由，但不會在瀏覽器創建新的歷史記錄.

router.redirect(redirectMap);
路由重定向
定義全局重定向規則。如果要訪問的路徑匹配重定向規則，則路徑會重定向到指定的路徑，以重定向后的路徑在瀏覽器中生成歷史記錄，原本訪問的路徑不會生成歷史記錄.

redirectMap: 對象。
該參數格式為：{fromPath: toPath},即當前訪問的路徑到實例路徑的映射關系。

router.redirect({
    // 重定向任意未匹配到的路徑 
    "*": "/home"
});

router.alias(aliasMap);
路由別名

別名和重定向的區別：
重定向把/a 替換成 "/b",
別名會保留"/a",但是匹配時使用 "/b"

router.alias({
    // 匹配 /a 時 就想是匹配 /a/b/c
    "/a": "a/b/c"
});

鉤子函數：處理或過濾事件，消息的回調函數。

鉤子的本質是一段用以處理消息系統的程序。

當消息到達后處理，在目標函數之前處理它。（鉤子函數先得到控制權）可以加工處理(改變)該消息，也可以不做處理而繼續傳遞該消息，還可以強制結束消息的傳遞。

根據鉤子函數的特性，可以終止界面的切換(組件切換，組件更新，數據更新)。 每個切換鉤子函數都會接受一個 transition 對象作為參數。
如果在驗證階段終止了界面切換，路由會保持當前應用狀態，恢復到前一個路由。

組件的更新(數據)會等到所有受影響的組件deactivate 和 activate 鉤子函數執行之后才會進行

前置鉤子函數

router.beforeEach(hook)
特性：
調用發生時間： 整個切換流水線（整個路由切換）的最前端被調用
決定流水線是否啟動： 如果此鉤子函數拒絕了切換組件，整個切換流水線根本不會啟動。
個數： 可以注冊多個全局的前置鉤子函數。這些函數會按照注冊的順序被調用。調用時異步的，后一個函數會等待前一個函數完成后執行。

router.beforeEach(function ( transition ) {
    console.log(  transition.to );
    if ( transition.to.path == "/forbidden" ) {
        transition.abort();
    } else {
        transition.next();
    }
});     

后置鉤子函數

router.afterEach(hook);
調用時間：路由切換成功進入激活階段
個數： 可以注冊多個全局的后置鉤子函數。這些函數將會按照注冊的順序被同步調用。

該鉤子會在每次canDeactivete和canActivate鉤子被resolve之后執行，并不能保證activate鉤子被resolve.

可以注冊多個全局后置鉤子，這些鉤子會按照注冊順序調用。但和全局前置鉤子不同的是，后一個鉤子并不會等前一個鉤子執行完才執行，它們是并行執行的。

切換過程中的鉤子對象

屬性：

transition.to // 要切換的路徑（目標路徑）的路由對象；

transition.from // 當前路徑的路由對象；

方法：

transition.next(); // 處理切換過程的下一步

transition.abort([reason]); // 終止或者拒絕此次切換

transition.redirect(path); // 取消當前切換并重定向到另一個路由

data鉤子函數不管組件是否可以重用，在每次路由切換的時候都會觸發。

// 組件
var Home = Vue.extend({
    template: "
HOME
",
    route: {
        activate: function ( transition ) {
            console.log( transition.to ); // 切換的路徑（目標路徑）的路由對象
            console.log( transition.from ); // 當前路徑的路由對象
            transition.next();
            transition.abort();
            transition.redirect();
        },
        deactivate: function ( transition ) {
            transition.next(); // 處理切換過程的下一步
        },
        data: function ( transition ) { // 不管組件是否重用，每次切換路由的時候都會被調用
            setTimeout(function () {
                transition.next({
                    msg: "data"
                });
            }, 1000);
        }
    }
});