Vue源码学习(十九):router基本原理
好家伙,
0.什么是路由?
路由就是匹配到对应路径显示对应的组件!
那么我们要如何去实现?
我们来回忆一下这router怎么用的
1. 声明式路由配置:在路由配置对象中,定义路径与组件的映射关系。例如:
import AboutComponent from '../views/AboutComponent.vue' const routes = [
{ path: '/', component: HomeComponent },
{ path: '/about', component: AboutComponent },
{ path: '/user/:id', component: UserComponent },
];
2. 安装路由插件:在 Vue 根实例中,使用 `Vue.use()` 方法安装 vue-router 插件,
并将路由实例注入到根实例中。
import Vue from 'vue';
import VueRouter from 'vue-router'; Vue.use(VueRouter);
3. 创建 router 实例:根据路由配置对象创建一个 VueRouter 实例。
const router = new VueRouter({
routes,
mode: 'history',
base: '',
});
4. 挂载路由:将创建的 router 实例挂载到 Vue 应用上。
new Vue({
router,
render: (h) => h(App),
}).mount('#app');
5. 在组件中使用 `<router-view>`:在需要显示路由组件的页面中,
使用 `<router-view>` 标签。该标签会根据当前路由自动渲染对应的组件。
<template>
<div>
<router-link to="/about">about</router-link>
<router-view></router-view>
</div>
</template>
6. 导航:通过调用 router 实例的方法(如 `router.push()`)实现页面跳转。当用户访问不同的路径时,vue-router 会根据路由配置自动渲染对应的组件。
图例:
也就是说如果我点击了about,就对应跳到/about,并在下方展示这个路径对应的组件
于是我们目标明确了,事实上,我们只需要解决三个问题
1.router-link的实现
2.router-view的实现
3.路径到组件的映射关系的实现
目录结构如下:
1.router-link的实现
routerLink.jsx
//组件
export default{
props:{ //组件的属性
to:{
type:String,
required:true
},
tag:{
type:String
}
}, //jsx
render(){
let tag = this.tag || 'a'
//跳转
console.log(tag,666)
let handler = ()=>{
this.$router.push(this.to)
}
return <tag onclick={handler}>{this.$slots.default}</tag >//jsx {变量}
}
}
2.router-view的实现
routerView.js
export default {
functional: true,
// 函数式组件
render(h, { parent, data }) { // 1 h 2 属性
//1 获取到组件
let route = parent.$route // 获取到route
// this match component
// 2问题 嵌套 /about/a :[about, a] routerView
data.routerView = true
let depath = 0
while (parent) {
// $vnode 相当于一个 占位符
if (parent.$vnode && parent.$vnode.data.routerView) {
depath++
}
parent = parent.$parent //一直寻找父亲
}
let recode = route.metched[0].metched[depath] if (!recode) {
return h() // 空
}
return h(recode.component, data)
}
}
3.路径到组件的映射关系的实现
index.js
export default class VueRouter {
constructor(options = {}) {
// vue-router 核心 1 match核心 [{},{}] => {'/':{组件相关信息},'/about':{}}
console.log(options.routes,'this is options.routes')
this.match = createMatch(options.routes || [])
this.beforeHooks= []
// 核心二:浏览器路由管理
// 1;获取模式
options.mode = options.mode || 'hash'
//进行判断
switch (options.mode) {
case 'hash':
this.history = new HashHistory(this)
break;
case 'history':
this.history = new HtmlHistory(this)
break
}
console.log(this.history)
}
createMatch.js
export function createMatch(routes) { //匹配器
//1变成一个路由映射表 [{},{}] => {'/':{组件相关信息},'/about':{},/about/c:{}}
const pathMap = createRouterMap(routes)
//2addRoutes 动态添加路由
// addRoutes(routes)
function addRoutes(routes) { // 1:用户自己动态的路由 2
// 注意需要合并在一起 createRouterMap(routes, pathMap)
} /.
.
.
./
}
createRouterMap.js
`createRouterMap` 函数用于创建路径映射对象
export function createRouterMap(routes,routerOptions={}) {
// console.log(routes,5556)
let pathMap = routerOptions
routes.forEach(router => {
//[{path:'/},{}] => {'/':{组件相关信息},'/about':{},/about/a:{}}
console.log(router, pathMap,'||this is router, pathMap')
addRouterRecode(router, pathMap)
})
// console.log(pathMap)
//问题 路由嵌套 /about/a
return pathMap
} function addRouterRecode(router, pathMap,parent) {
// 1路径 / 记录 let path = parent ?`${parent.path}/${router.path}`:router.path
let recode = {
path: router.path,
name: router.name,
component: router.component,
parent
}
//添加
if (!pathMap[path]) {
pathMap[path] = recode
}
//有没有儿子
if(router.children){
//递归
router.children.forEach(child=>{
//注意 parent
addRouterRecode(child, pathMap,recode)
})
}
}
对于以上createRouterMap方法,举个例子
const routes = [
{
path: '/',
name: 'Home',
component: HomeComponent
},
{
path: '/about',
name: 'About',
component: AboutComponent,
children: [
{
path: 'contact',
name: 'Contact',
component: ContactComponent
}
]
}
]; const routerOptions = {
base: '/'
}; const pathMap = createRouterMap(routes, routerOptions); 得到结果 {
'/': {
path: '/',
name: 'Home',
component: HomeComponent,
parent: null
},
'/about': {
path: '/about',
name: 'About',
component: AboutComponent,
parent: '/'
},
'/about/contact': {
path: '/about/contact',
name: 'Contact',
component: ContactComponent,
parent: '/about'
}
}
Vue源码学习(十九):router基本原理的更多相关文章
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- Vue源码学习二 ———— Vue原型对象包装
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...
- 最新 Vue 源码学习笔记
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...
- 【Vue源码学习】依赖收集
前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...
- Vue 源码学习(1)
概述 我在闲暇时间学习了一下 Vue 的源码,有一些心得,现在把它们分享给大家. 这个分享只是 Vue源码系列 的第一篇,主要讲述了如下内容: 寻找入口文件 在打包的过程中 Vue 发生了什么变化 在 ...
- VUE 源码学习01 源码入口
VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后 ...
- Vue源码学习(一):调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
- 【Vue源码学习】响应式原理探秘
最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...
- Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解
双大括号会将数据解释为普通文本,而非 HTML 代码.为了输出真正的 HTML,你需要使用 v-html 指令,例如: <!DOCTYPE html> <html lang=&quo ...
随机推荐
- 【matplotlib 实战】--柱状图
柱状图,是一种使用矩形条,对不同类别进行数值比较的统计图表.在柱状图上,分类变量的每个实体都被表示为一个矩形(通俗讲即为"柱子"),而数值则决定了柱子的高度. 1. 主要元素 柱状 ...
- Installing Gradle
Chapter 4. Installing Gradle 4.1. Prerequisites Gradle requires a Java JDK or JRE to be installed, v ...
- 【RocketMQ】RocketMQ 5.0新特性(二)- Pop消费模式
Pop模式消费和消息粒度负载均衡 在RocketMQ 5.0之前,消费有两种方式可以从Broker获取消息,分别为Pull模式和Push模式. Pull模式:消费需要不断的从阻塞队列中获取数据,如果没 ...
- 2D物理引擎 Box2D for javascript Games 第五章 碰撞处理
2D物理引擎 Box2D for javascript Games 第五章 碰撞处理 碰撞处理 考虑到 Box2D 世界和在世界中移动的刚体之间迟早会发生碰撞. 而物理游戏的大多数功能则依赖于碰撞.在 ...
- umicv cv-summary1-全连接神经网络模块化实现
全连接神经网络模块化实现 Linear与Relu单层实现 LossLayer实现 多层神经网络 不同梯度下降方法 Dropout层 今天这篇博文针对Assignment3的全连接网络作业,对前面学习的 ...
- Redis 6 学习笔记 1 —— NoSQL数据库介绍,Redis常用数据类型
NoSQL数据库介绍(了解) 技术的分类1.解决功能性的问题:Java.Jsp.RDBMS.Tomcat.HTML.Linux.JDBC.SVN,2.进一步地,解决系统功能扩展性的问题:Struts. ...
- 每天5分钟复习OpenStack(七)内存虚拟化
标题中的存储虚拟化,涉及到两个方面,分别是内存和磁盘的虚拟化技术.内存的虚拟化就不得不提EPT和VPID 技术. 首先申明下本人其实不想写一些纯理论的东西,但是架不住面试经被问,为此特将一些特别复杂的 ...
- 创建CI/CD流水线中的IaC前,需要考虑哪些事项?
许多软件工程团队通常会遵循相似的方法来交付基础设施以支持软件开发生命周期.为了缩小基础设施配置方式与应用程序环境部署方式之间的差距,许多 DevOps 团队将其基础设施即代码(IaC)模块直接连接到其 ...
- 查找数组中第K大的元素
要查找一个数组中的第 K 大元素,有多种方法可以实现,其中常用的方法是使用分治算法或快速选择算法,这两种方法的时间复杂度到时候O(n). 快速选择算法示例: package main import & ...
- 慎用:git reset --hard
丧心病狂的命令:git reset --hard commit ,我以后没弄懂这个命令之前,再也不碰它了,背后凉嗖嗖的,谁敢啊. 事情的原由是我本地git commit 的时候,发现文件多了,想删掉本 ...