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

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

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

使用的版本：0.7.13

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

    
    

        

            HOME
            Page
        
        
        
    

    
    
    

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

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

$route object

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

$route.params
返回對象

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

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

$route.matched
返回數(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)前路徑的名字

動態(tài)片段

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

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

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

全匹配片段

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

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

用戶名

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

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

路由選項

hahsbang (布爾值)

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

history （布爾值）

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

注意：

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

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

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

saveScrollPosiiton (布爾值)

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

transitionOnLoad (布爾值)

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

suppressTransitionError (布爾值)

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

linkActiveClass (字符串)

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

root (字符串)

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

路由實例屬性

app (根組件實例)

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

mode（字符串）

可能值有html5,hash,abstract

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

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

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

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

傳遞props

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

v-ref 父子組件通信

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

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

通過props來傳遞數(shù)據(jù)

支持v-transition和transitin-mode.

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

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

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

Home


Home


用戶名

v-link 會自動設(shè)置 的 href 屬性

HOME

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

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

params(對象)

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

query(對象)

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

Home

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

replace(布爾值)

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

append(布爾值)

默認(rèn)值false。當(dāng)該值為true時，如果此次導(dǎo)航的目的path為相對路徑，則實際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)建路由器實例通過選項的 linkActiveClass 屬性來進行全局設(shè)置。

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

Home

name和params 具名路徑

用戶名

exact 匹配是否完全一致

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

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

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

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

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

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

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

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

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

router.stop();

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

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

router.map(routerMap);

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

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

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

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

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

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

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

{ path: "/a/b" }

或者

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

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

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

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

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

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

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

router.alias(aliasMap);
路由別名

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

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

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

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

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

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

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

前置鉤子函數(shù)

router.beforeEach(hook)
特性：
調(diào)用發(fā)生時間： 整個切換流水線（整個路由切換）的最前端被調(diào)用
決定流水線是否啟動： 如果此鉤子函數(shù)拒絕了切換組件，整個切換流水線根本不會啟動。
個數(shù)： 可以注冊多個全局的前置鉤子函數(shù)。這些函數(shù)會按照注冊的順序被調(diào)用。調(diào)用時異步的，后一個函數(shù)會等待前一個函數(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ù)： 可以注冊多個全局的后置鉤子函數(shù)。這些函數(shù)將會按照注冊的順序被同步調(diào)用。

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

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

切換過程中的鉤子對象

屬性：

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

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

方法：

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

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

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

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

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