Vue.js 官方的路由库,Vue Router 已发布 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 Schema;并在运行时为缺失的参数解析器抛出错误,以便更早发现配置问题。在底层实现方面,devtools API 已升级至 v8,不过这也意味着 IIFE 构建版本不再内置 @vue/devtools-api,这是“无破坏性变更”承诺中的唯一例外。
社区反馈整体较为积极,该版本在 GitHub 的发布页面已获得超过 50 个反应。posva 在 X 上表示,这个 beta 版本“应该不会破坏任何东西,只是让你可以直接从 vue-router 导入来替换 unplugin-vue-router”,这一观点也得到了开发者的认同,他们普遍欢迎依赖链得到简化。随后发布的 v5.0.3 版本已经进一步改进了基于文件的路由功能,例如支持使用 _parent.vue 作为更清晰的嵌套路由模式。
在 X 上,有用户询问为什么这是一次主版本更新,可能是因为它并没有带来破坏性变更:
有意思,但为什么不是 minor 版本更新?
作者回应:
本质上是因为合并了两个仓库。
将基于文件的路由直接嵌入核心路由库的做法,也让人联想到 React 生态中的类似模式。例如 TanStack Router 为 React 应用提供类型安全的文件路由和内置数据加载能力。两者都秉持一种理念:数据获取应该以声明式方式与路由绑定,而不是在组件内部以命令式方式处理。不过,目前 Vue Router 的数据加载器仍处于实验阶段,而 TanStack Router 的该功能已经是核心能力。
值得注意的是,Vue Router 5 同时也是迈向版本 6 的一个过渡台阶。未来的 v6 将仅支持 ESM,并移除已弃用的 API。迁移指南建议开发者利用 v5 的过渡期,为这些即将到来的变化做好准备。对于从 unplugin-vue-router 迁移的项目,指南提供了一份详细清单,涵盖插件导入方式、数据加载器路径、Volar 配置以及 TypeScript 设置等内容。
Vue Router 是 Vue.js 生态中的一个开源项目,由 Eduardo San Martin Morote 维护。它每周下载量超过 500 万,提供富有表达力的路由语法、细粒度的导航控制以及基于组件的配置方式,用于构建 Vue.js 单页应用。





