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構建單頁應用程序。