项目中使用vue-router的时候,会进行以下操作(可能具体不是这么写的,但是原理一样):

  1.   定义映射关系routes;
  2.   定义router实例的时候传入vue和参数{routes...};
  3.   定义vue实例的时候,把router挂载到vue实例上。

  

  接下来看我们写一个极简版的router源码。
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动态化。

  初始化init()里监听浏览器的load和hashchange事件,当发生load和hashChange事件时触发onHashChange函数,并bind了this为当前路由器的实例。
  onHashChange()做的事情是获取地址栏里的地址赋值给current。
  createRouteMap()遍历传进来的options,生成routeMap
  initComponent()初始化router的组件<router-link/>,<router-view/>,把router-link渲染成一个a标签,<router-view> 用render函数渲染 则根据current和routeMap渲染当前路由对应的组件。

浅读vue-router源码,了解vue-router基本原理的更多相关文章

  1. Vue.js源码解析-Vue初始化流程

    目录 前言 1. 初始化流程概述图.代码流程图 1.1 初始化流程概述 1.2 初始化代码执行流程图 2. 初始化相关代码分析 2.1 initGlobalAPI(Vue) 初始化Vue的全局静态AP ...

  2. Vue.js源码解析-Vue初始化流程之动态创建DOM

    目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...

  3. vue.js源码精析

    MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...

  4. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  5. 解读Vue.use()源码

    Vue.use() vue.use()的作用: 官方文档的解释: 安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法.i ...

  6. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

  7. vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码

    webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...

  8. Vue.js源码——事件机制

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  9. 从Vue.js源码角度再看数据绑定

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

随机推荐

  1. JAVA类定义的修饰

    命名类的访问权限public.protected.friendly,private 这四个的权限, 作用域: 当前(父,超)类: 同一Package: 派生(子)类: 其他Package: publi ...

  2. LC 900. RLE Iterator

    Write an iterator that iterates through a run-length encoded sequence. The iterator is initialized b ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-1.SpringBoot整合微信支付开发在线教育视频站点介绍

    笔记 第一章项目介绍和前期准备 1.SpringBoot整合微信支付开发在线教育视频站点介绍     简介: 课程介绍,和小D课堂在线教育项目搭建开发 1.课程大纲介绍         2.微信支付项 ...

  4. 小D课堂 - 新版本微服务springcloud+Docker教程_6-03 高级篇幅之zuul常用问题分析

    笔记 3.高级篇幅之Zuul常用问题分析和网关过滤器原理分析 简介:讲解Zuul网关原理和过滤器生命周期,           1.路由名称定义问题         路由映射重复覆盖问题        ...

  5. 一百一十三:CMS系统之前台注册界面

    html {% from 'common/_macros.html' import static %}<!DOCTYPE html><html lang="en" ...

  6. ES 可视化工具

    1.ElasticSearch Head 用途:展示ES(集群)数据信息 视图:https://mobz.github.io/elasticsearch-head/ 下载:https://github ...

  7. docker数据管理(2)

    一.docker存储资源类型 docker两种存储资源类型 用户在使用 Docker 的过程中,势必需要查看容器内应用产生的数据,或者需要将容器内数据进行备份,甚至多个容器之间进行数据共享,这必然会涉 ...

  8. Ubuntu端口常用命令

    # 查看哪些进程打开了指定端口port(对于守护进程必须以root用户执行才能查看到) lsof -i:port # 查看哪些进程打开了指定端口port,最后一列是进程ID(此方法对于守护进程作用不大 ...

  9. JAVA中注解的实现原理

    注解的本质 「java.lang.annotation.Annotation」接口中有这么一句话,用来描述『注解』. The common interface extended by all anno ...

  10. React Native中Touchable组件的使用

    截图如下: /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import Rea ...