matcher 就是 vue-router 中的路由匹配器,负责路由的增删查,当我们进行路由跳转时,是通过 matcher 去匹配到正确路径,然后拿到 component(重定向除外),所以 matcher 是我们创建 vue-router 实例的第一步,当你发现路由匹配出错了,不正确,跳转到了错误的 component 或者未解析,那么极有可能是 matcher 部分出了问题,而...
说实话,我是有点失望的, vue-router matcher 的 diff 算法, 和存放 matcher 的数组似乎不是我认识的数据结构和算法,我一开始看到 vue-router 的几个特征, 1. N 叉树, 2. matcher 用数组存放 3. matchers 生成顺序依靠 vue-router 自定义得分, 几乎那两个数据结构是呼之欲出,但是竟然不是,这两个数据结...
constructor(options:RouterOptions={}){this.app=null// 根 Vue 实例this.apps=[]// 保存所有子组件的 Vue 实例this.options=options// 保存传入的路由配置this.beforeHooks=[]// 钩子函数this.resolveHooks=[]// 钩子函数this.afterHooks=[]// 钩子函数// 路由匹配器this.matcher=createMatcher(options.route...
其中routes为我们定义的路由表,也就是在createRouter时传入的options.routes,而globalOptions就是createRouter中的options。 createRouterMatcher中声明了两个变量matchers、matcherMap,用来存储通过路由表解析的matcher(RouteRecordMatcher类型),然后遍历routes,对每个元素调用addRoute方法。最后返回一个对象,该对象有addRoute、...
在上节讲到,createRouter方法的第一步就是根据传进来的路由配置列表,为每项创建matcher。这里的matcher可以理解成一个路由页面的匹配器,包含了路由常规方法。而创建matcher,调用了createRouterMatcher方法。 最终输出 createRouterMatcher执行完后,会返回的5个函数{ addRoute, resolve, removeRoute, getRoutes, getRecordMa...
在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来...
Vue Router中Matcher的初始化流程是什么 Vue Router 是 Vue.js 官方的路由管理器,它允许我们在单页面应用(SPA)中实现页面之间的导航。在 Vue Router 中,Mat...
此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解,对应的官方仓库源码地址会放到超上,可以配合着看;