在项目实战中,我在vue-router踩的坑,和我的发现,深入探索vue-router底层实现

最新推荐文章于 2023-08-21 23:16:32 发布
最新推荐文章于 2023-08-21 23:16:32 发布
阅读量1.4k 收藏
点赞数 4
分类专栏： vue-router vue路由匹配错误 文章标签： javascript vue.js 前端 路由算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43567331/article/details/104552928
版权

关于vue-router的一些发现


先说结论:name重名导致路由匹配错误

OneNote中的记录oneNote中的记录
关于这个问题我的思考和探索过程

首先,我能想到的就是无论vue-router内部是怎么处理的,最后在通过路由对象匹配对应组件的时候,name的优先级会高于path,这一点是显而易见的因为一开始我this.$router.push('string')中写的path是没错的,如果path优先级高于name,我就不会发现我那个很二的错误,也就不会有这篇文章了

贴出一张Call Stack的截图证实我的猜测

其次,我在this.$router.push('string')时,我push的是一个字符串而不是一个对象,我们都知道,vue-router是在我们初始化组件的时候,准确的说是beforeCreated的时候会为我们初始化路由对象的,路由对象有唯一映射的component,但是我只传入了一个string而已,他怎么知道我想跳转到哪个路由对象,理所当然的我就想到了可能vue-router内部会根据我传入的string去匹配内部的一个路由对象池,或者说构造一个路由对象(很快构造对象这个结论就被师兄否定了,仔细思考后,这个想法确实是有缺偏颇)

揭露路由对象的面纱

到这里,我已经有很大的把握vue-router是通过我穿的path匹配对应的路由对象的

再次在Call Stack中寻找蛛丝马迹
在这里插入图片描述

看看我发现了什么!!
在这里插入图片描述

在这里插入图片描述

到这里我们可以看到VueRouter对象中的确有一个matcher,并且里面构造了Map,addRouteRecord函数太过冗杂这里就不贴出来了,有兴趣的小伙伴可以去GitHub上找到vue-router的源码自行查阅哦


Tips

这是博主的第一篇博客,有很多不足的地方还请大家包含,文中的内容是我个人的看法,如果有不同的意见,欢迎在评论区指出,感谢看到这里的小伙伴们,同样喜欢JavaScript的同学有空可以一起交流一下噢,转发标明出处即可

Doctor-wu
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
route-matcher:一个小小的路由匹配器
06-06
路由匹配器 一个非常小的路由匹配器，我不得不用它来进行概念验证 我还在创建了一些测试用例 您可以使用以下命令运行所有测试 npm 运行测试
router.matcher
Black_Gin的博客
04-14 1万+
router.matcher // 替换现有router的routes router.matcher = new VueRouter({ routes: newRoutes }).matcher 对外提供两个方法match(负责route匹配), addRoutes（动态添加路由）。 具体原因：在做路径切换transitionTo方法中，首先就会使用const route = this.ro...
Vue源码 Vue Router（三）matcher 路由匹配器
陈坚泓的博客
06-20 5446
Vue源码 Vue Router（三）matcherVue源码 Vue Router（三）matchermatchercreateMatcheraddRoutesmatch总结Vue源码学习目录 Vue源码 Vue Router（三）matcher 学习内容和文章内容来自 黄轶老师 黄轶老师的慕课网视频教程地址:《Vue.js2.0 源码揭秘》、 黄轶老师拉钩教育教程地址:《Vue.js 3.0 核心源码解析》 这里分析的源码是Runtime + Compiler 的 Vue.js 调试代码在:node_
详解vue-router中matcher的作用
lplovewjm的博客
08-21 1331
一开始，在vue-router通过matcher完成路由的管理、匹配操作，其中用来存储matcher的主要是通过matchers和matcherMap。matchers中权重高的matcher优先matcherMap中的使用路由表中的name当作key，只存放原始matchers.
【vue-router源码】三、理解Vue-router中的Matcher
MAXLZ的博客
06-06 2031
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将带你理解vue-router的matcher。
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
在Vue中通过vue-router实现命名视图
01-08
在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示 例如：创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了 在路由对象中 使用components属性 以使一个路径...
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
01-19
vue-router(路由跳转) vuex(状态管理) axios(数据请求) mock.js(模拟后台数据) vue-touch(手势判断) fastclick(解决移动端浏览器 300 毫秒点击延迟问题) vue-lazyload(图片懒加载) swiper(轮播) 设计布局: ...
Vue.js实战之利用vue-router实现跳转页面
11-30
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html ...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
vueRouter--matcher之动态增减路由
m0_46529579的博客
12-04 4231
前言 优化项目时，有个环节在主路由下，根据后端返回不同内容，需要修改动态路由。如果直接删除原来路由，再addrouter新路由，发现原来的路由还是存在的。vue动态新增路由，没有删除功能（vue官方文档好像没有提供）。 解决办法 使用matcher ： const createRouter = () => new Router({ routes: [{ path: '/', name: '登录', component:
关于vue-router中路由权限用到的router.mtcher说明
一键写代码的博客
06-14 1万+
// 替换现有router的routes router.matcher = new VueRouter({ routes: newRoutes }).matcher outer.matcher是比较核心的一个属性。对外提供两个方法match(负责route匹配), addRoutes（动态添加路由）。 具体原因：在做路径切换transitionTo方法中，首先就会使用const route ...
vue-router路由权限控制的两种实现方案
热门推荐
zoro的博客
04-21 2万+
前言 最近在抽时间写一套后台管理系统框架模板（vue+element-ui），记录一些问题的解决方案。文章没什么顺序，就想到什么写什么了，也都是之前工作上碰到的问题。 抛出问题 Vue项目路由权限控制怎么实现？ 实现 大体上实现的思路很简单，先上图： 无非是将路由配置按用户类型分割为 用户路由 和 基本路由，不同的用户类型可能存在不同的 用户路由，具体依赖实际业务。 用户路由: 当前用户所特...
vue-router 实现动态路由加载，权限管理
canyi8023的博客
09-14 855
import Vue from 'vue' import Router from 'vue-router' import store from '@/store/index' import NProgress from 'nprogress' import 'nprogress/nprogress.css' import gatewayHomeRouter from './gatewayHome' Vue.use(Router) //不需要权限的路由 export const constantRoutes.
vue的matcher_vue-router工作原理概述和问题分析
weixin_42244905的博客
12-24 2119
工作原理简要流程图hashchange-->match route-->set vm._route--> render()-->render matched component问题1. 为什么url变更时，router-view组件就能渲染出在routes中定义的与当前path匹配的组件?root vue实例上定义了一个响应式属性Vue.util.defineReactiv...
vue-router底层实现原理
chenzeze0707的博客
05-17 5213
定义： vue用来写路由一个插件。包括 router-link、router-view 两个组件，其中 router-link 用于实现跳转，router-view 用于展示视图 vue-router的两种模式 hash模式 hash模式背后的原理是onhashchange事件 因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点...
整理 Vue2 项目中各种报错&警告-信息
Mr.小灰狼_随笔
09-06 1万+
Vue 报错&警告-信息 _ 整理版 自己平常 Vue 项目 中出现的一些Bug 和 警告⚠️ , 日常记录一下 : 目录 ( 1 )[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404" ( 2 )[Vue warn]: Error in v-on handler: "TypeError: this.todos.push is not a function
知道Vue中router实现的底层原理吗?
夜静天明
10-13 707
在我们了解router的实现原理之前，我们先来聊聊vue的路由跳转到底是怎样的吧！ 首先，我们知道vue创建的项目其实是一个单页应用。在我们对vue项目进行打包以后，我们所有的代码都会被成一份HTML和一份JS，那我们创建的那么多.vue文件是如何实现通信的呢？ 作者：神犬小七 链接：https://juejin.cn/post/7152892881332600839 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
vue-router怎么用在html项目
最新发布
10-24
在需要进行页面跳转的地方，使用 `<router-link>` 组件来实现，例如 `<router-link to="/path">跳转到某个页面</router-link>`。 以上是使用 vue-router 在 HTML 项目中的基本用法。可以根据需要进行进一步的配置和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值