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的启动