Vue Router 4目前處於測試階段。讓我們看一下這個新版本中的一些很酷的功能。

Vue3支援

Vue 3引入了 createApp API，它改變了將外掛新增到Vue例項的方式。由於這個原因，過去版本的Vue Router將不相容Vue 3。

Vue Router 4引入了 createRouter API，可以建立一個可與Vue 3一起安裝的路由器例項。

src/router/index.js

import { createRouter } from "vue-router";export default createRouter({ routes: [...],});

src/main.js

import { createApp } from "vue";import router from "./router";const app = createApp({});app.use(router);app.mount("#app");

History選項

在之前的Vue Router版本中，你可以設定 mode 選項設定導航的模式。

hash 模式利用URL hash來模擬完整的URL，這樣當URL發生變化時，頁面不會被重新載入。history 利用HTML5 History API來實現URL導航，而不需要重新載入頁面。

src/router/index.js

// Vue Router 3const router = new VueRouter({ mode: "history", routes: [...]});

在Vue Router 4中，這些模式已被抽象到模組中，可以將其匯入並分配給新的 history 選項。這種額外的靈活性使你可以根據需要自定義路由歷史記錄的實現。

src/router/index.js

// Vue Router 4import { createRouter, createWebHistory } from "vue-router";export default createRouter({ history: createWebHistory(), routes: [],});

動態路由

當路由使用新的 .addRoute 方法執行時，Vue Router 4將允許你新增動態路由。

這可能不是你每天都會使用的功能，但是確實有一些有趣的用例。例如，假設你正在為一個檔案系統應用程式建立一個使用者介面，並且希望動態新增路徑，你可以這樣做：

src/components/FileUploader.vue

methods: { uploadComplete (id) { router.addRoute({ path: `/uploads/${id}`, name: `upload-${id}`, component: FileInfo }); }}

你還可以使用以下相關方法：

removeRoutehasRoutegetRoutes導航守衛可以返回值而不是next

導航守衛是Vue Router的鉤子，允許使用者在導航事件之前或之後執行自定義邏輯，如 beforeEach、beforeRouterEnter等。

它們通常用於檢查使用者是否有許可權訪問某個頁面，驗證動態路由引數，或者銷燬監聽器。

自定義邏輯執行後，next 回撥用於確認路由、宣告錯誤或重定向。

在第4版中，你可以從鉤子中返回一個值或Promise來代替。這將允許像下面這樣方便的速記。

// Vue Router 3router.beforeEach((to, from, next) => { if (!isAuthenticated) { next(false); } else {  next(); }})// Vue Router 4router.beforeEach(() => isAuthenticated);

總結

這些只是版本4中新增的一些新功能。您可以在Vue Router Next倉庫中了解更多資訊。

感謝Eduardo和團隊為Vue Router 4所做的巨大努力！

如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。

作者簡介：Web前端工程師，全棧開發工程師、持續學習者。

私信回覆：大禮包，送某網精品視訊課程網盤資料，準能為你節省不少錢！