因为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大致结构如下:

  

     主要做了三件事:

  1、定义VueRouter对象,包括 私有变量、构造函数以及原型方法。

  2、给插件对象增加 install 方法用来安装插。

  3、浏览器环境且Vue存在 则 自动使用插件,进行一系列初始化(Vuex则是在 Store 实例化时启动)。

  VueRouter的构造函数主要干了两件事:

  1、通过 createMather() ,根据用户路由配置规则生成

     (1) 根据path 对应的路由记录

     (2) 根据name对应的路由记录 map

返回的是两个函数 match() 以及 addRoutes(),方便后续调用匹配相应规则。

  2、根据传入的model (默认是‘hash'方式)实例化具体的 history

(四)VueRouter的启动

  

 

vue-router源码学习(一)的更多相关文章

  1. Vue.js 源码学习笔记

    最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...

  2. vue.js源码学习分享(一)

    今天看了vue.js源码  发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换 ...

  3. Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器

    主体 实例方法归类:   先看个作者推荐, 清晰易懂的  23232 简易编译器   重点: 最简单的订阅者模式 // Observer class Observer { constructor (d ...

  4. vue.js源码学习分享(九)

    /* */ var arrayKeys = Object.getOwnPropertyNames(arrayMethods);//获取arrayMethods的属性名称 /** * By defaul ...

  5. vue.js源码学习分享(七)

    var _Set; /* istanbul ignore if */ if (typeof Set !== 'undefined' && isNative(Set)) { // use ...

  6. vue.js源码学习分享(六)

    /* */ /* globals MutationObserver *///全局变化观察者 // can we use __proto__?//我们能用__proto__吗? var hasProto ...

  7. Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty

    解析神奇的 Object.defineProperty   几行代码看他怎么用   var a= {} Object.defineProperty( a, "b", { value ...

  8. Vue.js 源码学习笔记 - 细节

     1. this._eventsCount = { }    这是为了避免不必要的深度遍历: 在有广播事件到来时,如果当前 vm 的 _eventsCount 为 0, 则不必向其子 vm 继续传播该 ...

  9. vue.js源码学习分享(八)

    /* */ var uid$1 = 0; /** * A dep is an observable that can have multiple * directives subscribing() ...

  10. vue.js源码学习分享(五)

    //配置项var config = { /** * Option merge strategies (used in core/util/options)//选项合并策略 */ optionMerge ...

随机推荐

  1. nignx 测试配置文件

    nginx -t nginx: the configuration file /usr/local/nginx-1.2.9/conf/nginx.conf syntax is ok nginx: co ...

  2. Python3实现简单可学习的手写体识别

    0.目录 1.前言 2.通过pymssql与数据库的交互 3.通过pyqt与界面的交互 4.UI与数据库的交互 5.最后的main主函数 1.前言 版本:Python3.6.1 + PyQt5 + S ...

  3. jQuer __Ajax DOM

    链接:在线jQueryhttp://www.bootcdn.cn   一.each(遍历)   $("ul li").each(function(index,value){ ale ...

  4. tolua++实现lua层调用c++技术分析

    tolua++技术分析 cocos2dx+lua 前言 一直都使用 cocos2dx + lua 进行游戏开发,用 Lua 开发可以专注于游戏逻辑的实现,另外一方面可以实现热更新:而且 lua 是一个 ...

  5. PHP递归解决兔子问题,面试必备

    接到面试通知辗转反侧,一直在默念明天改如何介绍自己的项目经验等.早早的起床,洗漱,把自己的总结的问题自问自答了一些.匆匆吃了早饭,挤进让人面目狰狞的地铁,此时什么都不顾,只盼着赶紧下地铁.终于提前半小 ...

  6. 我的第一个python web开发框架(18)——前台页面与接口整合

    由于我们前后台系统没有分开,所以前台页面调用接口时,可以直接使用后台管理系统已经完成的接口,不过后台管理系统接口的访问加上了登录验证,所以需要将前台要用到的接口进行处理,让它们设置到白名单当中 我们打 ...

  7. ML学习分享系列(2)_计算广告小窥[中]

    原作:面包包包包包包 改动:寒小阳 && 龙心尘 时间:2016年2月 出处:http://blog.csdn.net/Breada/article/details/50697030 ...

  8. Oracle ROWID具体解释

    1.ROWID定义 ROWID:数据库中行的全局唯一地址 对于数据中的每一行,rowid伪列返回行的地址.rowid值主要包括下面信息: 对象的数据对象编号 该行所在的数据文件里的数据块 该行中数据块 ...

  9. 兔子-ps抠图

    介绍2种方法:1.用高速选择工具 2.用铅笔工具 1.高速选择后.ctrl+c复制,新建空白图片,粘贴进去 2.用钢笔工具在图像的边缘定出若二个点,确定完毕之后按crtl+回车键选择.然后复制,新建空 ...

  10. 基于 HTML5 Canvas 的 3D 机房创建

    对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用.本例是将灯光.雾化以及 eye 的最大最小距离等等功能在 ...