浅读vue-router源码,了解vue-router基本原理
项目中使用vue-router的时候,会进行以下操作(可能具体不是这么写的,但是原理一样):
- 定义映射关系routes;
- 定义router实例的时候传入vue和参数{routes...};
- 定义vue实例的时候,把router挂载到vue实例上。
class VueRouter {
constructor(Vue, options) {
this.$options = options
this.routeMap = {}
this.app = new Vue({
data: {
current: '#/'
}
}) this.init()
this.createRouteMap(this.$options)
this.initComponent(Vue)
} // 初始化 hashchange
init() {
window.addEventListener('load', this.onHashChange.bind(this), false)
window.addEventListener('hashchange', this.onHashChange.bind(this), false)
} createRouteMap(options) {
options.routes.forEach(item => {
this.routeMap[item.path] = item.component
})
} // 注册组件
initComponent(Vue) {
Vue.component('router-link', {
props: {
to: String
},
template: '<a :href="to"><slot></slot></a>'
}) const _this = this
Vue.component('router-view', {
render(h) {
var component = _this.routeMap[_this.app.current]
return h(component)
}
})
} // 获取当前 hash 串
getHash() {
return window.location.hash.slice(1) || '/'
} // 设置当前路径
onHashChange() {
this.app.current = this.getHash()
}
}
constructor里接受参数option并作为成员属性保存下来。定义routeMap用来保存路由和组件的map结构。定义vue的实例app让current动态化。
浅读vue-router源码,了解vue-router基本原理的更多相关文章
- Vue.js源码解析-Vue初始化流程
目录 前言 1. 初始化流程概述图.代码流程图 1.1 初始化流程概述 1.2 初始化代码执行流程图 2. 初始化相关代码分析 2.1 initGlobalAPI(Vue) 初始化Vue的全局静态AP ...
- Vue.js源码解析-Vue初始化流程之动态创建DOM
目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...
- vue.js源码精析
MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 解读Vue.use()源码
Vue.use() vue.use()的作用: 官方文档的解释: 安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法.i ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
- vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码
webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...
- Vue.js源码——事件机制
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- 从Vue.js源码角度再看数据绑定
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
随机推荐
- centos7 python2升级python3
安装前的准备环境 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurse ...
- qcow2镜像制作
windows 1.准备windows镜像.驱动镜像. 驱动下载地址: https://docs.fedoraproject.org/en-US/quick-docs/creating-windows ...
- C++ STL——deque
目录 一 deque容器 1.1 deque容器基本概念 1.2 deque构造函数 1.3 deque赋值操作 1.4 deque大小操作 1.5 deque双端插入和删除操作 1.6 deque数 ...
- hibernate关联映射之多对多
package loaderman.c_many2many; import java.util.HashSet; import java.util.Set; /** * 开发人员 * * */ pub ...
- MATLAB学习(八)神经网络拟合工具箱 Neural Net Fitting使用示例
>> x=-3:0.2:5;y=x.^2-1;xn=-2:0.1:7; >> >> %多元函数(z=sin(x2+y2)/(x2+y2))拟合 >&g ...
- Java日志体系(六)log4j2
1.1 简介 log4j2,一个日志的实现框架,是log4j的升级版本,于2014年7月正式亮相.与第一代log4j不同,log4j2完全重写了log4j的日志实现,并不是在原有基础上进行的升级,解决 ...
- Linux学习—redis安装配置及远程连接
1.下载安装包并解压 进入文件夹/usr/local cd /usr/local 下载redis安装包: wget http://download.redis.io/releases/redis-.t ...
- idea设置背景色和字体大小
修改背景色 点击[File],选择[Settings]. 点击[Editor],选择[color Scheme]. 默认Scheme只有两种.Default是白色,Darcula是黑色 修改字体 ...
- 【Hadoop】MapReduce自定义分区Partition输出各运营商的手机号码
MapReduce和自定义Partition MobileDriver主类 package Partition; import org.apache.hadoop.io.NullWritable; i ...
- django 之(一) --- DjangoRestFormwork
接口概念 IOP:面向接口编程,不再关注具体的实现:只关注输入.输出. http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practice ...