我一开始看到 vue-router 的几个特征, 1. N 叉树, 2. matcher 用数组存放 3. matchers 生成顺序依靠 vue-router 自定义得分, 几乎那两个数据结构是呼之欲出,但是竟然不是,这两个数据结构就是,二叉搜索树(BST)和二叉堆(优先级队列), 为什么认为是这两个数据结构,一是我认为...
matcher 就是 vue-router 中的路由匹配器,负责路由的增删查,当我们进行路由跳转时,是通过 matcher 去匹配到正确路径,然后拿到 component(重定向除外),所以 matcher 是我们创建 vue-router 实例的第一步,当你发现路由匹配出错了,不正确,跳转到了错误的 component 或者未解析,那么极有可能是 matcher 部分出了问题,而...
在vue-router中,每一个我们定义的路由都会被解析成一个对应的matcher(RouteRecordMatcher类型),路由的增删改查都会依靠matcher来实现。 createRouterMatcher 在createRouter中会通过createRouterMatcher创建一个matcher(RouterMatcher类型)。 export function createRouterMatcher( routes: RouteRecordRaw[], globalOptions: Pat...
constructor(options:RouterOptions={}){this.app=null// 根 Vue 实例this.apps=[]// 保存所有子组件的 Vue 实例this.options=options// 保存传入的路由配置this.beforeHooks=[]// 钩子函数this.resolveHooks=[]// 钩子函数this.afterHooks=[]// 钩子函数// 路由匹配器this.matcher=createMatcher(options.route...
哈喽大咖好,我是跑手,本次给大家继续讲解下vue-router@4.x中router matcher的实现。 在上节讲到,createRouter方法的第一步就是根据传进来的路由配置列表,为每项创建matcher。这里的matcher可以理解成一个路由页面的匹配器,包含了路由常规方法。而创建matcher,调用了createRouterMatcher方法。
在vue-router中,每一个我们定义的路由都会被解析成一个对应的matcher(RouteRecordMatcher类型),路由的增删改查都会依靠matcher来实现。 createRouterMatcher 在createRouter中会通过createRouterMatcher创建一个matcher(RouterMatcher类型)。 export function createRouterMatcher( ...
在“初始化流程” 解读的文章当中,我们分析到在createRouter初始化路由的方法当中会调用createRouterMacher方法创建页面路由匹配对象 matcher。 先来回顾下createRouterMatcher这个方法主流程逻辑: 创建相关的路由匹配器的操作方法:addRoute, resolve,removeRoute, getRoutes,getRecordMatcher; ...
Matcher是vuerouter中的关键组件，负责路由的创建、修改和删除。它通过处理路由表和全局选项，实现路由的高效匹配和管理。Matcher的创建：createRouter函数通过createRouterMatcher生成Matcher。createRouterMatcher接收路由表和全局选项作为输入。Matcher的内部处理：在createRouterMatcher中，创建matchers和matcherMap来...
Matcher的初始化流程主要发生在 Vue Router 实例化时。以下是Matcher初始化的主要步骤: 2.1 创建 Matcher 实例 在Vue Router 的构造函数中,Matcher实例是通过createMatcher函数创建的。createMatcher函数接收两个参数: routes:用户定义的路由配置数组。 router:Vue Router 实例。
此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解,对应的官方仓库源码地址会放到超上,可以配合着看; 对应的源码版本是3.5.3,也就是 Vue.js 2.x 对应的 Vue Router 最新版本; Vue Router 是标准写法,为了简单,下面会简称 router。