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大致结构如下:
主要做了三件事:
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源码学习(一)的更多相关文章
- Vue.js 源码学习笔记
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- vue.js源码学习分享(一)
今天看了vue.js源码 发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换 ...
- Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器
主体 实例方法归类: 先看个作者推荐, 清晰易懂的 23232 简易编译器 重点: 最简单的订阅者模式 // Observer class Observer { constructor (d ...
- vue.js源码学习分享(九)
/* */ var arrayKeys = Object.getOwnPropertyNames(arrayMethods);//获取arrayMethods的属性名称 /** * By defaul ...
- vue.js源码学习分享(七)
var _Set; /* istanbul ignore if */ if (typeof Set !== 'undefined' && isNative(Set)) { // use ...
- vue.js源码学习分享(六)
/* */ /* globals MutationObserver *///全局变化观察者 // can we use __proto__?//我们能用__proto__吗? var hasProto ...
- Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty
解析神奇的 Object.defineProperty 几行代码看他怎么用 var a= {} Object.defineProperty( a, "b", { value ...
- Vue.js 源码学习笔记 - 细节
1. this._eventsCount = { } 这是为了避免不必要的深度遍历: 在有广播事件到来时,如果当前 vm 的 _eventsCount 为 0, 则不必向其子 vm 继续传播该 ...
- vue.js源码学习分享(八)
/* */ var uid$1 = 0; /** * A dep is an observable that can have multiple * directives subscribing() ...
- vue.js源码学习分享(五)
//配置项var config = { /** * Option merge strategies (used in core/util/options)//选项合并策略 */ optionMerge ...
随机推荐
- nignx 测试配置文件
nginx -t nginx: the configuration file /usr/local/nginx-1.2.9/conf/nginx.conf syntax is ok nginx: co ...
- Python3实现简单可学习的手写体识别
0.目录 1.前言 2.通过pymssql与数据库的交互 3.通过pyqt与界面的交互 4.UI与数据库的交互 5.最后的main主函数 1.前言 版本:Python3.6.1 + PyQt5 + S ...
- jQuer __Ajax DOM
链接:在线jQueryhttp://www.bootcdn.cn 一.each(遍历) $("ul li").each(function(index,value){ ale ...
- tolua++实现lua层调用c++技术分析
tolua++技术分析 cocos2dx+lua 前言 一直都使用 cocos2dx + lua 进行游戏开发,用 Lua 开发可以专注于游戏逻辑的实现,另外一方面可以实现热更新:而且 lua 是一个 ...
- PHP递归解决兔子问题,面试必备
接到面试通知辗转反侧,一直在默念明天改如何介绍自己的项目经验等.早早的起床,洗漱,把自己的总结的问题自问自答了一些.匆匆吃了早饭,挤进让人面目狰狞的地铁,此时什么都不顾,只盼着赶紧下地铁.终于提前半小 ...
- 我的第一个python web开发框架(18)——前台页面与接口整合
由于我们前后台系统没有分开,所以前台页面调用接口时,可以直接使用后台管理系统已经完成的接口,不过后台管理系统接口的访问加上了登录验证,所以需要将前台要用到的接口进行处理,让它们设置到白名单当中 我们打 ...
- ML学习分享系列(2)_计算广告小窥[中]
原作:面包包包包包包 改动:寒小阳 && 龙心尘 时间:2016年2月 出处:http://blog.csdn.net/Breada/article/details/50697030 ...
- Oracle ROWID具体解释
1.ROWID定义 ROWID:数据库中行的全局唯一地址 对于数据中的每一行,rowid伪列返回行的地址.rowid值主要包括下面信息: 对象的数据对象编号 该行所在的数据文件里的数据块 该行中数据块 ...
- 兔子-ps抠图
介绍2种方法:1.用高速选择工具 2.用铅笔工具 1.高速选择后.ctrl+c复制,新建空白图片,粘贴进去 2.用钢笔工具在图像的边缘定出若二个点,确定完毕之后按crtl+回车键选择.然后复制,新建空 ...
- 基于 HTML5 Canvas 的 3D 机房创建
对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用.本例是将灯光.雾化以及 eye 的最大最小距离等等功能在 ...