Vue Router 4.0 正式发布!焕然一新。
关注若川视野
,回复"pdf" 领取资料,回复"加群",可加群长期交流学习
12月8日,Vue Router 4 正式发布稳定版本。
在经历了 14 个 Alpha,13 个 Beta 和 6 个 RC 版本之后,Vue Router v4 闪亮登场,为你带来了 TypeScript 集成、新功能以及对现代应用程序的一致性改进,已经准备好成为 Vue3 新应用的最佳伴侣。
将近 2 年的时间,大约 1500 次提交,15 个RFC[1],无数的心血……以及许多用户的帮助以及他们的错误报告和功能请求。 谢谢大家的帮助!
项目结构优化
Vue Router 现在分为三个模块:
History 实现: 处理地址栏,并且特定于 Vue Router 运行的环境(节点,浏览器,移动设备等)
Router 匹配器:处理类似
/users/:id
的路由解析和优先级处理。Router: 将一切连接在一起,并处理路由特定功能,例如导航守卫。
动态路由
动态路由[2]是 Vue Router 最受欢迎的功能之一。 它让路由变得更灵活,更强大,让曾经不可能的功能成为了现实!Vue Router4 新增了有自动优先级排名的高级路径解析功能,用户新现在可以以随意的顺序定义路由,因为 Router 会根据 URL 字符串表示来猜测应该匹配的路由。
优先级排名,其实就是根据你路径书写的规则计算出一个得分,根据得分来优先选用最有可能的那一项。
举个例子来说,你同时写了 /users
和 /:w+
这两个路由:
const routes = [{path: '/users',Component: Users},{path: '/:w+',Component: NotFound}
]
那么你当然希望在输入 /users
这个更精确的路径的时候,走上面的规则,而下面则作为兜底规则。在旧版的 Vue Router 中需要通过路由声明的顺序来保证这个行为,而新版则无论你怎样放置,都会按照得分系统来计算该匹配哪个路由。
甚至专门有 Path Ranker[3] 这个网页来帮助你计算路由的优先级得分。
在测试用例中,ssh 找到了一个更具体的优先级得分排名,可以先感受一下:
it('works', () => {checkPathOrder(['/a/b/c','/a/b','/a/:b/c','/a/:b','/a','/a-:b-:c','/a-:b','/a-:w(.*)','/:a-:b-:c','/:a-:b','/:a-:b(.*)','/:a/-:b','/:a/:b','/:w','/:w+'])
})
简单来说,越明确的路由排名越高,越模糊则反之,无关顺序,非常有意思。
改进后的导航系统
新的导航系统更加具有一致性,它改善了滚动行为的体验,使其更加接近原生浏览器的行为。 它还为用户提供了有关导航状态的几乎更多信息,用户可以用这些信息,通过 ProgressBar
和 Modal
之类的全局 UI 元素让用户的体验变得更好。
更强大的 Devtools
多亏了新的Vue Devtools[4],Vue Router 能够和浏览器进行以下更高级的整合。
时间轴记录路由变化:
完整 route 目录,能够帮助你轻松进行调试:
更好的路由守卫
和next
说拜拜,现在确认跳转不需要再手动执行这个函数了,而是根据你的返回值来决定行为。同样支持异步返回 Promise。
现在的路由守卫 API 更加友好且合理了,可以完美利用 async await
做异步处理,比如这样:
router.beforeEach(async (to, from) => {// canUserAccess() returns `true` or `false`return await canUserAccess(to)
})
一致的编码
编码方式(Encoding)做了统一的适配,现在将在不同的浏览器和路由位置属性(params
, query
和 hash
)中保持一致。 作为参数传递给 router.push()
时,不需要做任何编码,在你使用 $route
或 useRoute()
去拿到参数的时候永远是解码(Decoded)的状态。
迁移成本低
Vue Router 4 主要致力于于在改善现有 Router 的同时保持非常相似的 API,如果你已经很上手旧版的 Vue Router 了,那你的迁移会做的很顺利,可以查看文档中的完整迁移指南[5]。
展望未来
在过去的几个月中,Vue Router 一直稳定而且好用,现在它可以做些更好玩的事儿了:
使用现有工具(Vetur,Vite,Devtools 等)得到更好的开发体验。
与 Suspense 等现代功能更好地集成。
RFCs 和社区共同探讨出更好用的 API。
开发更轻型的版本。
试试看
等不及想试试 Vue Router 4 了?这里有CodeSandbox[6],还有集成好 Tailwind CSS 的 Vite 模板[7],或使用CLI[8]来开始你的游玩。
想学习 Vue Router 4 的更多先进理念了?请立刻查看我们的新文档[9]。 如果您是现有的 Vue 2.x 用户,请直接转到迁移指南[10]。
“
发布地址:https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0
”
参考资料
[1]
RFC:https://github.com/vuejs/rfcs/pulls?q=is%3Apr+sort%3Aupdated-desc+label%3Arouter+is%3Aclosed
[2]
动态路由:https://next.router.vuejs.org/guide/advanced/dynamic-routing.html
[3]
Path Ranker:https://paths.esm.dev/?p=AAMeJVyBwRkJTALagIAOuGrgACU.#
[4]
Vue Devtools:https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
[5]
完整迁移指南:https://next.router.vuejs.org/guide/migration/index.html
[6]
CodeSandbox:https://codesandbox.io/s/vue-router-4-reproduction-hb9lh
[7]
集成好 Tailwind CSS 的 Vite 模板:https://vite-tailwind.esm.dev/about
[8]
CLI:https://cli.vuejs.org/
[9]
新文档:https://next.router.vuejs.org/
[10]
迁移指南:https://next.router.vuejs.org/guide/migration/index.html#breaking-changes
相关阅读
深入揭秘前端路由本质,手写 mini-router
推荐阅读
知乎问答:一年内的前端看不懂前端框架源码怎么办?
我在阿里招前端,我该怎么帮你?(文末有福利)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?
末尾
你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)
关注
若川视野
,回复"pdf" 领取优质前端书籍pdf,回复"加群",可加群长期交流学习我的博客地址:https://lxchuan12.gitee.io 欢迎收藏
觉得文章不错,可以点个
在看
呀^_^另外欢迎留言
交流~
小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间
【源码精选】
按钮,欢迎点击阅读,也可以星标我的公众号,便于查找
Vue Router 4.0 正式发布!焕然一新。相关推荐
- Vue CLI 3.0 正式发布,Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
- Vue CLI 3.0正式发布!
web前端教程 用大白话,来讲编程 网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...
- cli3解决 ie11语法错误 vue_【VUE3.0】它来了,2020年09月18日,Vue.js 3.0 正式发布,但是........
您曾见过凌晨的苹果发布会,那前端界的发布会你见过吗? 在Vue3正式发布前,Vue的作者尤雨溪发表主题演讲. 注意! 注意! 注意! 发布会中表示不建议大家立刻升级到Vue3.0版本,之前项目中某些依 ...
- vue 版本发布 在线跟新用户操作解决方案_Vue3.0正式发布,本次发布所有总结,一起看看!【附在线视频】...
B站在线视频 2020年09月18日,Vue.js 3.0 正式发布.本次发布框架本身带来了几个大点的改进,以及功能和历程的一些总结! 1.3.0历程 3.0版本代表了2年多的开发工作 具有30多个R ...
- 注意避坑,Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
- Vue Router 4 的使用,一篇文章给你讲透彻
Vue 3.X 使用Vue Router 4.x 进行路由配置,本文我们就来研究下如何使用Vue Router 4.x,本文中所有的使用方式都是使用 Composition API的方式. 本文通过一 ...
- Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移 只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
- Vue 2.0 + Vue Router + Vuex 后台管理系统的骨架
https://github.com/helloyoucan/ba 用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node ...
- Vue this.$router.go(0) 刷新当前页面在苹果手机无效
this.router.go(0) 和 window.location.reload() 都是刷新当前页面的方法 Vue 写H5页面时,用 this.$router.go(0); 方法刷新当前页面,在 ...
最新文章
- L型四驱越野模型车初期磨合指南
- Spark分析之Standalone运行过程分析
- Windows中安装Apache2和PHP4权威指南
- 函数内部定义的tensroflow变量也会被保存
- MySQL substring()函数
- 乍暖还寒也不怕 浅谈物联网智能温度控制器
- limesurvey php5.2,功能强大的PHP开源问卷调查系统 LimeSurvey 有中文语言包-win7中文语言包...
- Java 二叉树层次遍历
- CentOS 系统时间校准
- 浅谈谷歌(Google)退出中国大陆市场事件
- r语言如何计算t分布临界值_「SPSS数据分析」SPSS差异分析(3)独立样本T检验操作步骤及解读...
- Bugzilla的维护与管理
- IT 工作中常用的英语单词
- Charles修改ip
- win10自带sftp服务器_高手亲自解决win10系统下怎么使用OpenSSH设置SFTP服务器的完全操作办法...
- 5G注册流程分级详解Step4-8
- 第一世界的年轻人追求的是房子还是别的?
- 开源备份工具duplicity支持阿里云OSS后端存储
- Ubuntu、Linux、Unix的联系与区别
- 图码详解算法|理解八大思想,胜刷百道力扣!
热门文章
- java executor_Java并发编程(08):Executor线程池框架
- Linux抓eth0网卡包的命令,Linux系统使用tcpdump命令抓包
- 页面调用系统window打印
- C#3种常见的定时器(多线程)
- c#程序中使用like“查询access数据库查询为空的问题
- 内存查看工具RAMMAP说明
- 让Spring架构减化事务配置(转)
- 搜索目录里所有文件(包括子目录)
- 全国计算机等级考试题库二级C操作题100套(第50套)
- 全国计算机等级考试题库二级C操作题100套(第39套)