Vue Router 4 值得期待的新特性

文章來(lái)源于公眾號(hào)：前端全棧開(kāi)發(fā)者 ，作者張張

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

Vue3支持

Vue 3 引入了 createApp API，它改變了將插件添加到Vue實(shí)例的方式。由于這個(gè)原因，過(guò)去版本的Vue Router將不兼容Vue 3。

Vue Router 4引入了 createRouter API，可以創(chuàng)建一個(gè)可與Vue 3一起安裝的路由器實(shí)例。

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選項(xiàng)

在之前的Vue Router版本中，你可以設(shè)置 mode 選項(xiàng)設(shè)置導(dǎo)航的模式。

hash 模式利用 URL hash 來(lái)模擬完整的 UR L，這樣當(dāng) URL 發(fā)生變化時(shí)，頁(yè)面不會(huì)被重新加載。history 利用 HTML5 History API 來(lái)實(shí)現(xiàn) URL 導(dǎo)航，而不需要重新加載頁(yè)面。

src/router/index.js

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

在Vue Router 4中，這些模式已被抽象到模塊中，可以將其導(dǎo)入并分配給新的 history 選項(xiàng)。這種額外的靈活性使你可以根據(jù)需要自定義路由歷史記錄的實(shí)現(xiàn)。

src/router/index.js

// Vue Router 4
import { createRouter, createWebHistory } from "vue-router";


export default createRouter({
  history: createWebHistory(),
  routes: [],
});

動(dòng)態(tài)路由

當(dāng)路由使用新的 .addRoute 方法運(yùn)行時(shí)，Vue Router 4將允許你添加動(dòng)態(tài)路由。

這可能不是你每天都會(huì)使用的功能，但是確實(shí)有一些有趣的用例。例如，假設(shè)你正在為一個(gè)文件系統(tǒng)應(yīng)用程序創(chuàng)建一個(gè)用戶界面，并且希望動(dòng)態(tài)添加路徑，你可以這樣做：

src/components/FileUploader.vue

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

你還可以使用以下相關(guān)方法：

• removeRoute
• hasRoute
• getRoutes

導(dǎo)航守衛(wèi)可以返回值而不是next

導(dǎo)航守衛(wèi)是Vue Router的鉤子，允許用戶在導(dǎo)航事件之前或之后運(yùn)行自定義邏輯，如 beforeEach、`beforeRouterEnter等。

它們通常用于檢查用戶是否有權(quán)限訪問(wèn)某個(gè)頁(yè)面，驗(yàn)證動(dòng)態(tài)路由參數(shù)，或者銷毀監(jiān)聽(tīng)器。

自定義邏輯運(yùn)行后，next 回調(diào)用于確認(rèn)路由、聲明錯(cuò)誤或重定向。

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

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


// Vue Router 4
router.beforeEach(() => isAuthenticated);

總結(jié)

這些只是版本4中新增的一些新功能。您可以在Vue Router Next倉(cāng)庫(kù)中了解更多信息。

感謝Eduardo和團(tuán)隊(duì)為Vue Router 4所做的巨大努力！

以上就是W3Cschool編程獅關(guān)于Vue Router 4 值得期待的新特性的相關(guān)介紹了，希望對(duì)大家有所幫助。