浅读vue-router源码，了解vue-router基本原理

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

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

接下来看我们写一个极简版的router源码。

class VueRouter {constructor(Vue, options) {this.$options = optionsthis.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 = thisVue.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渲染当前路由对应的组件。

转载于:https://www.cnblogs.com/superlizhao/p/10994447.html

浅读vue-router源码，了解vue-router基本原理相关推荐

【VUE】源码分析 - vue中的 HTMLParser，模板解析的第一步
tip:本系列博客的代码部分(示例等除外),均出自vue源码内容,版本为2.6.14.但是为了增加易读性,会对不相关内容做选择性省略.如果大家想了解完整的源码,建议自行从官方下载. GitHub ...
vue源码解析（3）—— Vue.js 源码构建
Vue.js 源码构建 Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下. 构建脚本通常一个基于 NPM 托管的项目都会有一个 package.json ...
js define函数_不夸张，这真的是前端圈宝藏书！360前端工程师Vue.js源码解析
优秀源代码背后的思想是永恒的.普适的. 这些年来,前端行业一直在飞速发展.行业的进步,导致对从业人员的要求不断攀升.放眼未来,虽然仅仅会用某些框架还可以找到工作,但仅仅满足于会用,一定无法走得更远.随 ...
在线直播源码，VUE 获奖名单滚动显示的两种方式
在线直播源码,VUE 获奖名单滚动显示的两种方式第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seaml ...
Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
vue函数如何调用其他函数?_从源码中学Vue（一）生命周期中的钩子函数的那点事儿...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) Vue作为当下前端最流行的框架之一,在国内占绝对的优势.所以接下来我们一起来学习它吧! 我不会像其它人 ...
field list什么意思_从源码中学Vue(六)「解密」为什么操作数组的方法也会触发视图更新...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) 上一章节我大概分析了下在Vue中的 Watcher.Observer.Dep三者的关系,以及如何检测数 ...
vue.js源码学习分享（一）
今天看了vue.js源码发现非常不错,想一边看一遍写博客和大家分享 /*** Convert a value to a string that is actually rendered. *转换一 ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...
[vue] 你有看过vue的源码吗？如果有那就说说看
[vue] 你有看过vue的源码吗?如果有那就说说看看过看不懂个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题

浅读vue-router源码，了解vue-router基本原理

浅读vue-router源码，了解vue-router基本原理相关推荐

最新文章

热门文章