通过vue-router学习vue

vue-router是vue官方支持,可以看做vue最佳实践
本文大致梳理vue-router源码各个文件大体作用,不深入细节
建议对照vue-router源码阅读

src/index.js

1. VueRouter类

  • 构造器

    • createMatcher分析路由配置、路径、层级等;
    • 根据modefallback配置和浏览器history.pushState支持情况创建对应的history实例(pushreplacego等方法,通过操作history实现);
  • init方法
  • 暴露addRoutespushreplacego等路由操作方法;
  • 暴露beforeEachbeforeResolveonReady等钩子函数;

2. VueRouter类添加install方法

这个方法的第一个参数是 Vue构造器,第二个参数是一个可选的选项对象(Vue插件);

src/install.js

VueRouter类的install方法

  • 判断Vue是否已初始化Vue-router;
  • 通过全局混入Vue.mixin实现注册和销毁,使用全局混入将影响每一个之后创建的 Vue 实例(Vue全局混入))。

    • beforeCreatethis指向为Vue组件实例,所有组件beforeCreate声明周期都会调用此函数;
    • this.$options.routernew Vue时传入的Vue-router实例,this.$options.router不为空,说明此时this指向Vue根组件实例;
    new Vue({
      router,// this.$options.router不为空,说明此时this指向Vue根组件实例
      render: h => h(App)
    }).$mount('#app')
    • this._routerRoot指向Vue根组件实例,后续所有子组件实例的_routerRoot均指向this.$parent._routerRoot,所有子组件的_routerRoot通过层层传递的形式指向根组件实例;
  • 添加 Vue 实例属性$router$route,通过把它们添加到 Vue.prototype 上实现。这里通过Object.defineProperty只设置了get方法,是为了防修改。这样所有组件可通过this.$routerthis.$route操作路由和获取当前路由信息。
  • 声明全局组件RouterViewRouterLink
  • 设置选项合并策略(自定义选项合并策略))

src/history/base.js

History类,HashHistoryHTML5History都继承自这个基础类

  • 定义go、push、replace、ensureURL、getCurrentLocation方法,由子类实现
  • 构造器,初始化属性,处理<base>标签

src/components/link.js

全局组件RouterLink

默认渲染为<a>标签

tag: {
    type: String,
    default: 'a'
}

默认事件为click

事件回调handler先通过guardEvent过滤掉部分事件,然后进行跳转

const handler = e => {
  if (guardEvent(e)) {
    if (this.replace) {
        router.replace(location, noop)
    } else {
        router.push(location, noop)
    }
  }
}

tag属性为a,则事件直接绑定到组件上

if (this.tag === 'a') {
  data.on = on
}

修改tag,则先查找default插槽(Vue具名插槽))中是否有<a>标签,有则绑定到最先找到的<a>标签上,没有找到则直接绑定到组件上

if (this.tag === 'a') {
    ...
} else {
    // find the first <a> child and apply listener and href
    const a = findAnchor(this.$slots.default)
    if (a) {
        // append new listeners for router-link
        ...
    } else {
        // doesn't have <a> child, apply listener to self
        data.on = on
    }
}

src/components/view.js

全局组件RouterViewfunctional组件(Vue函数式组件))

原文链接:segmentfault.com

上一篇:【JavaScript】for 循环 label 语句
下一篇:Node.js入门

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    1 个月前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 🚩Vue源码——如何监听数据变化

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue 是用数据来驱动来生成视图...

    11 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    6 个月前
  • 🏆 掘金技术征文|双节特别篇 vue3——composition API

    vue3刚出测试版的时候尝过一次,后来学了react,才尝出点味道来,现在再尝一遍,先从重要的compositon api入手! composition api 主要是把之前vue的核心api暴露出来...

    18 天前
  • 🎉🎉🎉 一个基于vue3+vite+ts的完整项目

    VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 ...

    15 天前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    2 个月前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    1 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前

官方社区

扫码加入 JavaScript 社区