摘要：當(dāng)值為，而瀏覽器并不支持時(shí)，會(huì)自動(dòng)降級(jí)為模式布爾值默認(rèn)值為，該值只是在值為時(shí)生效。布爾值默認(rèn)值為，當(dāng)該值為，在組件路由切換鉤子中產(chǎn)生的異常不會(huì)被拋出。當(dāng)該被匹配是，地址欄的為布爾值默認(rèn)值為，當(dāng)該值為時(shí)，此次導(dǎo)航不會(huì)產(chǎn)生歷史記錄。

Vue和vue-router 創(chuàng)建 SPA 應(yīng)用。

vue-router 作用. 通過(guò)路由規(guī)則，渲染各自的組件。
Vue開(kāi)發(fā)，整個(gè)應(yīng)用已經(jīng)被拆分成了獨(dú)立的組件。在使用vue-router時(shí)，把路由映射到各個(gè)組件。vue-router 把各個(gè)組件渲染到正確的地方。

使用的版本：0.7.13

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

    
    

        

            HOME
            Page
        
        
        
    

    
    
    

僅有路由跳轉(zhuǎn)需要不夠，很多情況下，在同一個(gè)頁(yè)面上，多標(biāo)簽頁(yè)的切換，在vue-router 中，用嵌套路由。

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

$route object

$route.path
返回字符串，返回當(dāng)前路徑 /page1/imgs

$route.params
返回對(duì)象

$route.quer
返回對(duì)象 ，路由中查詢參數(shù)，get請(qǐng)求的鍵值對(duì)

$route.router
路由規(guī)則所屬的路由組件

$route.matched
返回?cái)?shù)組，當(dāng)前匹配的路徑中所有的路徑規(guī)則.

{ "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
返回當(dāng)前路徑的名字

動(dòng)態(tài)片段

語(yǔ)法：: 冒號(hào)開(kāi)頭的路徑片段定義。

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

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

全匹配片段

動(dòng)態(tài)片段只能匹配路徑中的一個(gè)部分，而全匹配片段是貪婪模式。

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

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

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

用戶名

實(shí)例化VueRouter時(shí)可以出啊如一個(gè)可選的VueRouterConfig路由選項(xiàng)對(duì)象來(lái)自定義路由器的行為。返回rotuer路由器實(shí)例，router實(shí)例暴露了一些實(shí)例屬性和實(shí)例方法，可以用來(lái)控制整個(gè)路由應(yīng)用。

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

路由選項(xiàng)

hahsbang (布爾值)

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

history （布爾值）

默認(rèn)值為false。當(dāng)該值為true時(shí)，會(huì)以HTML5 history API 進(jìn)行導(dǎo)航。

注意：

假如當(dāng)前頁(yè)面地址欄為：http://example.com/home，而在路由配置中配置了/home/weblcome路徑，那么當(dāng)用戶直接訪問(wèn)http://examle.com/home/welcome路徑時(shí)，服務(wù)器端應(yīng)確保返回http://example.com/home 頁(yè)面，而不是http://example.com/home/weblcom頁(yè)面。否則可能出現(xiàn)/home/welcome頁(yè)面不存在而返回404錯(cuò)誤。

當(dāng)history值為true，不存hashbang值是否為true，總會(huì)以history模式進(jìn)行導(dǎo)航。

當(dāng)history值為true，而瀏覽器并不支持HTML5 history API 時(shí)，vue-rotuer會(huì)自動(dòng)降級(jí)為hashbang模式

saveScrollPosiiton (布爾值)

默認(rèn)值為false，該值只是在history值為true時(shí)生效。當(dāng)該值設(shè)置為true時(shí)，在點(diǎn)擊瀏覽器后按退按鈕時(shí)頁(yè)面會(huì)定位到上一次該路由對(duì)應(yīng)的視圖所在位置。

transitionOnLoad (布爾值)

默認(rèn)值false，當(dāng)該值為true是，在頁(yè)面第一次加載時(shí)rotuer-view會(huì)有路由切換動(dòng)畫(huà)，默認(rèn)為直接渲染。

suppressTransitionError (布爾值)

默認(rèn)值為false， 當(dāng)該值為true，在組件路由切換鉤子中產(chǎn)生的異常不會(huì)被拋出。

linkActiveClass (字符串)

默認(rèn)值為v-link-active， 表示 v-link 所在元素處于激活狀態(tài)時(shí) vue-router加在該元素上的類名。

root (字符串)

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

路由實(shí)例屬性

app (根組件實(shí)例)

vue-rotuer 應(yīng)用的根Vue實(shí)例，由調(diào)用 router.satrt(App, "#app"); 時(shí)傳入的組件構(gòu)造器App創(chuàng)建得到。

mode（字符串）

可能值有html5,hash,abstract

html5: 當(dāng)創(chuàng)建rotuer實(shí)例時(shí)，所有配置對(duì)象history值為true，并且瀏覽器支持HTML5 histroy API時(shí)。

hash ： 當(dāng)創(chuàng)建rotuer實(shí)例時(shí)，所傳配置hash值為true，或者h(yuǎn)istory值為true，當(dāng)時(shí)瀏覽器不支持HTML history API時(shí)。

abstract: 當(dāng)宿主環(huán)境中沒(méi)有window對(duì)象(例如非瀏覽器環(huán)境)時(shí)，會(huì)自動(dòng)退出此模式。

用于渲染匹配的組件，基于Vue的動(dòng)態(tài)組件系統(tǒng)，繼承了一個(gè)動(dòng)態(tài)組件的特性。

傳遞props

中的HTML內(nèi)容被插入到相應(yīng)的組件中

v-ref 父子組件通信

被渲染的組件會(huì)注冊(cè)到父級(jí)組件的 this.$ 對(duì)象中。

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

通過(guò)props來(lái)傳遞數(shù)據(jù)

支持v-transition和transitin-mode.

支持v-ref，被渲染的組件會(huì)注冊(cè)到父級(jí)組件的this.$對(duì)象中

支持solt，router-view中的HTML內(nèi)容會(huì)被插入到相應(yīng)的路由組件模板的slot中。

v-link 是用戶操作的時(shí)候，來(lái)匹配不同的路徑。 用戶點(diǎn)擊的時(shí)候， 會(huì)調(diào)用 router.go()

Home


Home


用戶名

v-link 會(huì)自動(dòng)設(shè)置 的 href 屬性

HOME

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

當(dāng)v-link解析后的值是對(duì)象時(shí)，該對(duì)象可以有屬性有：

params(對(duì)象)

包含路由中的動(dòng)態(tài)片段和全匹配片段的鍵值對(duì)。

query(對(duì)象)

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

Home

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

replace(布爾值)

默認(rèn)值為false，當(dāng)該值為true時(shí)，此次導(dǎo)航不會(huì)產(chǎn)生歷史記錄。當(dāng)用戶點(diǎn)擊的時(shí)候，會(huì)觸發(fā) `router.replace()`函數(shù)，而不是默認(rèn)的 `router.go()`。作用：產(chǎn)生的跳轉(zhuǎn)不會(huì)留下歷史記錄

append(布爾值)

默認(rèn)值false。當(dāng)該值為true時(shí)，如果此次導(dǎo)航的目的path為相對(duì)路徑，則實(shí)際URL中的路徑是當(dāng)前path后拼接目的path。

例如：當(dāng)前path為/a，

b

/a/b

activeClass(字符串)
默認(rèn)值為v-link-active,值擔(dān)憂v-link指令的a元素處于激活狀態(tài)是的class名稱。該值也可以在創(chuàng)建路由器實(shí)例通過(guò)選項(xiàng)的 linkActiveClass 屬性來(lái)進(jìn)行全局設(shè)置。

path 設(shè)置字面量路徑

Home

name和params 具名路徑

用戶名

exact 匹配是否完全一致

注意：使用 v-link而不是href來(lái)設(shè)置URL。
原因：

v-link是Vue指令，它會(huì)根據(jù)它的值來(lái)設(shè)置href的值。

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

在HTML5 history模式下，v-link執(zhí)行會(huì)監(jiān)聽(tīng)點(diǎn)擊事件，防止瀏覽器重新加載頁(yè)面。

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

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

用來(lái)提供啟動(dòng)，路由映射，重定向，路由切換全局鉤子。

router.start(App, el);
啟動(dòng)一個(gè)路由程序，創(chuàng)建一個(gè)App的實(shí)例并掛載到元素el上。

參數(shù)：
App(函數(shù)/對(duì)象)
App可以是一個(gè)Vue組件構(gòu)造器或者組件選項(xiàng)對(duì)象，當(dāng)為組建選項(xiàng)對(duì)象時(shí)，在vue-rotuer內(nèi)部會(huì)調(diào)用Vue.extend來(lái)創(chuàng)建App構(gòu)造器。
el（字符串/DOM元素）
el可以是一個(gè)CSS選擇器或者DOM元素，用來(lái)掛載路由應(yīng)用的跟組件。

router.stop();

停止監(jiān)聽(tīng) popstate 和 hashchange 事件

當(dāng)路由處于停止?fàn)顟B(tài)， router.app 并沒(méi)有銷(xiāo)毀， 依然 可以使用 router.go(path) 進(jìn)行跳轉(zhuǎn)。也可以不使用參數(shù)調(diào)用 router.start() 來(lái)重新啟動(dòng)路由。

router.map(routerMap);

批量定義路由映射規(guī)則，內(nèi)部調(diào)用router.on方法實(shí)現(xiàn)。

參數(shù)routerMap對(duì)象愛(ài)過(guò)你，鍵為路徑，值為路由配置對(duì)象。在vue-router內(nèi)部會(huì)對(duì)routerMap對(duì)象中的每個(gè)鍵值調(diào)用router.on();方法來(lái)進(jìn)行路由映射，

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

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

在內(nèi)部實(shí)現(xiàn)時(shí)，router.map(path, config); 對(duì)于接收到的路由映射對(duì)象中每個(gè)鍵值對(duì)調(diào)用router.on();

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

router.go(path);
導(dǎo)航到一個(gè)指定path的路由。
參數(shù)：
path(字符串、對(duì)象)
當(dāng)path為字符串時(shí)，會(huì)當(dāng)作普通路徑來(lái)解析，如果路由是相對(duì)路徑(不以"/"開(kāi)頭)，則會(huì)以相對(duì)于當(dāng)前路徑的方式進(jìn)行解析。
當(dāng)path為對(duì)象時(shí)，對(duì)象中只包含path屬性:

{ path: "/a/b" }

或者

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

當(dāng)path為對(duì)象時(shí)，兩種格式都可支持可選的 replace 和 append 屬性：

replace 布爾類型，默認(rèn)值為false。當(dāng)該值為true，跳轉(zhuǎn)不產(chǎn)生新的歷史記錄。
append 布爾類型，默認(rèn)值為false。 當(dāng)該值為true，假如要跳轉(zhuǎn)的路徑是相對(duì)路徑，則實(shí)際路徑是當(dāng)前路勁拼接要跳轉(zhuǎn)的錄幾個(gè)。假設(shè)當(dāng)前路徑為/a,目的路徑為b，當(dāng)append值為false時(shí)，則實(shí)際跳轉(zhuǎn)后路徑為/b，為true時(shí)，則實(shí)際跳轉(zhuǎn)后路徑為/a/b.

router.replace(path);
導(dǎo)航一個(gè)新路由，但不會(huì)在瀏覽器創(chuàng)建新的歷史記錄.

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

redirectMap: 對(duì)象。
該參數(shù)格式為：{fromPath: toPath},即當(dāng)前訪問(wèn)的路徑到實(shí)例路徑的映射關(guān)系。

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

router.alias(aliasMap);
路由別名

別名和重定向的區(qū)別：
重定向把/a 替換成 "/b",
別名會(huì)保留"/a",但是匹配時(shí)使用 "/b"

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

鉤子函數(shù)：處理或過(guò)濾事件，消息的回調(diào)函數(shù)。

鉤子的本質(zhì)是一段用以處理消息系統(tǒng)的程序。

當(dāng)消息到達(dá)后處理，在目標(biāo)函數(shù)之前處理它。（鉤子函數(shù)先得到控制權(quán)）可以加工處理(改變)該消息，也可以不做處理而繼續(xù)傳遞該消息，還可以強(qiáng)制結(jié)束消息的傳遞。

根據(jù)鉤子函數(shù)的特性，可以終止界面的切換(組件切換，組件更新，數(shù)據(jù)更新)。 每個(gè)切換鉤子函數(shù)都會(huì)接受一個(gè) transition 對(duì)象作為參數(shù)。
如果在驗(yàn)證階段終止了界面切換，路由會(huì)保持當(dāng)前應(yīng)用狀態(tài)，恢復(fù)到前一個(gè)路由。

組件的更新(數(shù)據(jù))會(huì)等到所有受影響的組件deactivate 和 activate 鉤子函數(shù)執(zhí)行之后才會(huì)進(jìn)行

前置鉤子函數(shù)

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

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

后置鉤子函數(shù)

router.afterEach(hook);
調(diào)用時(shí)間：路由切換成功進(jìn)入激活階段
個(gè)數(shù)： 可以注冊(cè)多個(gè)全局的后置鉤子函數(shù)。這些函數(shù)將會(huì)按照注冊(cè)的順序被同步調(diào)用。

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

可以注冊(cè)多個(gè)全局后置鉤子，這些鉤子會(huì)按照注冊(cè)順序調(diào)用。但和全局前置鉤子不同的是，后一個(gè)鉤子并不會(huì)等前一個(gè)鉤子執(zhí)行完才執(zhí)行，它們是并行執(zhí)行的。

切換過(guò)程中的鉤子對(duì)象

屬性：

transition.to // 要切換的路徑（目標(biāo)路徑）的路由對(duì)象；

transition.from // 當(dāng)前路徑的路由對(duì)象；

方法：

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

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

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

data鉤子函數(shù)不管組件是否可以重用，在每次路由切換的時(shí)候都會(huì)觸發(fā)。

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