vue-router源碼學習（一）

　　由於v3.01版本中的   /src代碼使用TypeScript進行書寫，我這裏僅僅用做模塊學習，

　　具體學習的仍是 /dist/vue-router.js 代碼。

（一）基本使用方式

　　JS代碼

    // 定義路由規則
    const routes = [
        {
            name:'首頁',
            path: '/',
            component: function (resolve) {
                require.async(['js/modules/Index.js'], resolve);
            }
        },
        {
            name:'詳情頁產品列表頁',
            path: '/detail/:params1/:params2',
            component: function (resolve) {
                require.async(['js/modules/detail.js'], resolve);
            }
        },
        {
            name:'產品列表頁',
            path: '/product',

            component: function (resolve) {
                require.async(['js/modules/product.js'], resolve);
            }
        }
    ]

    // 建立一個路由器實例
    var router = new VueRouter({
        routes
    });

    //路由器會建立一個 App 實例，而且掛載到選擇符 #app 匹配的元素上。
    const app = new Vue({
        router
    }).$mount('#app')

js

　　頁面代碼

<div id="app">
    <h1>Basic</h1>
    <ul>
        <li><router-link to="/">首頁</router-link></li>
        <li><router-link to="/detail/a/c">詳情頁</router-link></li>
        <li><router-link to="/product/">產品列表頁</router-link></li>
    </ul>
    <router-view class="view"></router-view>
</div>

頁面使用方式

　　因爲是學習，就不是webpack進行項目工程化。這裏實用seajs去獲取相應的組件信息。

　　從實用角度分析： vue-router 插件給咱們提供了兩個組件：

　　<router-view> 與 <router-link>,其中<router-view>是必需組件。

（二）源碼目錄結構

　　 

　components： <router-view>與<router-link>的實現

　history：　　 　　     路由的封裝方式，此router 下的model : history,hash,abstract

　util:　　　　  　　     各類功能函數，比較重要的是  path.js，route.js

   create-matcher：       在VueRouter--->   createMatcher()  建立匹配規則

　create-route-map：   在VueRouter --->createMatcher() 建立匹配規則

　index: 　　    　　     插件入口，即 VueRouter 構造函數

　install:　　    　　     插件安裝方式，即在Vue beforeCreate生命週期時，vue-router開始初始化。

（三）VueRouter的定義及自啓動

　   vue-router 插件的啓用是自動啓用的，與 vuex 插件啓用方式是不一樣的。

　　整個Index大體結構以下：

　　

　    主要作了三件事：

　　一、定義VueRouter對象，包括 私有變量、構造函數以及原型方法。

　　二、給插件對象增長 install 方法用來安裝插。

　　三、瀏覽器環境且Vue存在 則 自動使用插件，進行一系列初始化（Vuex則是在 Store 實例化時啓動)。

 

　　VueRouter的構造函數主要乾了兩件事：

　　一、經過 createMather() ，根據用戶路由配置規則生成 

　　　  （1） 根據path 對應的路由記錄

　　　  （2） 根據name對應的路由記錄 map 

             返回的是兩個函數 match() 以及 addRoutes(),方便後續調用匹配相應規則。

　　二、根據傳入的model （默認是‘hash'方式）實例化具體的 history

（四）VueRouter的啓動