浅读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 ...
随机推荐
- Ubuntu 安装 JDK1.8
以下是Ubuntu 14.04安装JDK1.8.0_25与配置环境变量过程笔记. 1.源码包准备: 首先到官网下载jdk,http://www.oracle.com/technetwork/java/ ...
- python 利用python的subprocess模块执行外部命令,获取返回值
有时执行dos命令需要保存返回值 需要导入库subprocess import subprocess p = subprocess.Popen('ping www.baidu.com', shell= ...
- HTML属性操作
属性名 属性值 相关操作:读与取 一.属性读操作:元素.属性,其实在就是找到等号右边的值 代码为: <!DOCTYPE html> <html lang="en" ...
- mysql 首次安装后 简单操作与语句 新手入门
首先cd到安装目录中bin路径:这是我的安装路径以管理员身份打开cmd(防止权限不足)cd E:\>cd E:\mysql\mysql-5.5.40-winx64\bin 首次安装需要输入 my ...
- 008-centos6.5搭建web服务【nginx-tomcat8-jre8】
一.机器配置 yum install vim 1.1.Linux最大进程以及打开文件数 ulimit -n和-u可以查看linux的最大进程数和最大文件打开数. ulimit -a 展示所有 临时方法 ...
- Qt编写自定义控件18-魔法小鱼
前言 上次发了个纯painter绘制的老鼠,那个就是qt目录下的demo,改的,只是比demo中的老鼠稍微胖一点,估计人到中年都发福吧.这次来一个魔法小鱼,这条鱼可以变换颜色,尾巴还会摇动,可以设定旋 ...
- 在jsp页面如何获得url参数
方法一:当一个url过来时,如:http://localhost:8080/pro/demo/hello.jsp?name=john,在hello.jsp页面,我们可以这样得到name的值: < ...
- Elasticsearch常见错误与配置简介
一.常见错误 1.1 root用户启动elasticsearch报错 Elasticsearch为了安全考虑,不让使用root启动,解决方法新建一个用户,用此用户进行相关的操作.如果你用root启动, ...
- HADOOP依赖
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- 纹理特征描述之灰度差分统计特征(平均值 对比度 熵) 计算和比较两幅纹理图像的灰度差分统计特征 matlab代码实现
灰度差分统计特征有: 平均值: 对比度: 熵: i表示某一灰度值,p(i)表示图像取这一灰度值的概率 close all;clear all;clc; % 纹理图像的灰度差分统计特征 J = i ...