Vue Router 4.0正式发布!焕然一新
今天,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 能够和浏览器进行以下更高级的整合。
- 时间轴记录路由变化: