因为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. 用Redis轻松实现秒杀系统

    秒杀系统的架构设计 秒杀系统,是典型的短时大量突发访问类问题.对这类问题,有三种优化性能的思路: 写入内存而不是写入硬盘 异步处理而不是同步处理 分布式处理 用上这三招,不论秒杀时负载多大,都能轻松应 ...

  2. 探究PHP底层

    探究PHP底层 1.PHP是什么?   PHP 指的是我们从外面看到的一套完整的系统.这听起来有点糊涂,但其实并不复杂(PHP4 内部结构图).从功能上来分:我们可以分为三部分: 1. 解释器部分(Z ...

  3. 最好用的MongoDB GUI - LivingMongo

    LivingMongo是一个mongodb数据库的GUI操作系统,支持对数据字段的修改.数据搜索.集合的分类.索引管理.空间统计.慢查询等 demo地址 : http://living-mongo.k ...

  4. NGUI_PopupList

    八.PopuList下拉菜单 1.使用Populist的规律: (1).有一系列选项需要玩家做出选择,这些选项是有限多个的. (2).这些选项玩家必须选择一个,也只能选择一个. (3).这些选项如果全 ...

  5. Java 中 for each

    格式: for(type element: array) {       System.out.println(element); } //ex:{ public static void main(S ...

  6. PHP 数据库连接池实现

    摘要 xml 读取配置文件 简易方式 常规方式 PHP解析XML 配置文件 解析 数据库连接池 測试 申请过多时拒绝请求 已满后拒绝放入 总结 摘要 之前总是以脚本面向过程的方式写PHP代码,所以非常 ...

  7. 动手开发一个名为“微天气”的微信小程序(上)

    引言:在智能手机软件的装机量中,天气预报类的APP排在比較靠前的位置.说明用户对天气的关注度非常高.由于人们不管是工作还是度假旅游等各种活动都须要依据自然天气来安排.跟着本文开发一个"微天气 ...

  8. eclipse 鲜为人知的调试技巧,你用过多少

    今天在OSChina上看到了篇调试技巧,的确对于调试非常有帮助,而且大部分我们都没实用过,我们常常使用的调试是F5678四个键,假设你还想提高调试效率你能够尝试着用一用,写过代码做过项目的人都知道调试 ...

  9. AsyncLocal的运作机制和陷阱

    这是今天帮柠檬分析一个AsyncLocal相关的问题时发现的. 试想这个代码输出的值是多少? using System; using System.Threading; using System.Th ...

  10. 利用MJModel解决关键字

    #import "CJAddressModel.h" @implementation CJAddressModel +(NSDictionary *)mj_replacedKeyF ...