Vue Router作为Vue.js官方提供的路由库,现已发布了5.0版本。这一过渡性版本直接将备受关注的unplugin-vue-router插件整合到了核心包中。维护者Eduardo San Martin Morote(posva)称,这一版本的设计初衷就是让它“看起来平淡无奇”,因此对于现有的Vue Router 4用户来说,这个版本并不会带来任何破坏性变化。
Vue Router 5最显著的变化就是整合了unplugin-vue-router插件。这个在构建时使用的插件提供了基于文件的路由功能,并且完全支持TypeScript。此前,这一功能是作为独立的包存在的,而现在可以直接通过vue-router导入来使用,因此不再需要额外的依赖项。对于已经在使用unplugin-vue-router的开发者来说,进行迁移只需要修改导入路径即可;而对于没有使用该插件的开发者来说,升级操作也只需执行一个命令即可:
pnpm update vue-router@5
除了整合了基于文件的路由功能外,Vue Router 5还引入了几项新的实验性功能。现在可以从vue-router/experimental导入数据加载器,这种机制能够将数据获取与路由定义直接关联起来。这样一来,组件只有在获得了所需的数据之后才会被渲染,从而减少了手动管理状态的需求。
此次版本更新还增加了对Volar插件的支持,从而改善了开发工具的功能;同时为路由配置添加了JSON格式的校验规则,并能在运行时检测到参数解析器缺失的情况,从而更早地发现配置问题。在底层技术层面,devtools API也升级到了v8版本。不过需要注意的是,使用IIFE构建方式时,@vue/devtools-api这个依赖项将不再被打包进去,这是唯一一个打破了“不引入破坏性变化”这一承诺的例外情况。
社区对这一版本的反馈总体上是积极的。GitHub上的版本发布信息收到了超过50条评论。Posva在X平台上宣布,这个测试版“不会引发任何问题,只是可以让大家直接用vue-router来替代unplugin-vue-router”,许多开发者也都对这种简化后的依赖关系表示欢迎。后续发布的v5.0.3版本进一步优化了基于文件的路由功能,尤其是增加了对_parent.vue文件的支持,使得嵌套路由的实现方式更加简洁。
在X平台上,有用户质疑为什么这会是一个重大版本更新,因为这个版本并没有引入任何破坏性变化:
真奇怪,为什么不只是进行一个小版本的升级呢?
<作者作出了如下回应:
其实,这本质上就是将两个仓库合并在一起。
将基于文件的路由机制集成到核心路由器中,这种设计思路与React生态系统中的类似方案有诸多相似之处。TanStack Router为React应用程序提供了类型安全的、基于文件的路由功能,并内置了数据加载机制。这两种解决方案都秉持这样的理念:数据获取应该以声明式的方式与路由规则关联起来,而不是在组件内部以命令式的方式进行处理。不过,Vue Router的数据加载器目前仍处于实验阶段,而TanStack Router的数据加载器则是其核心功能之一。
值得注意的是,Vue Router 5同时也是通往版本6的过渡阶段。版本6将仅支持ESM格式,并会移除那些已被弃用的API。迁移指南建议开发者利用这个过渡期来为即将到来的这些变化做好准备。对于那些从未使用过`unplugin-vue-router`的项目来说,该指南提供了详细的检查清单,涵盖了插件导入、数据加载器配置路径、Volar设置以及TypeScript相关配置等内容。
Vue Router是一个由Eduardo San Martin Morote维护的开源项目,它是Vue.js生态系统的重要组成部分。目前,该项目的每周下载量超过了500万次。它提供了表达力强的路由语法、精细的导航控制功能,以及基于组件的配置机制,这些都有助于使用Vue.js构建单页应用程序。