Vue Router 4 的變化及炫酷特性

做者：Matt Maribojoc
譯者：前端小智
來源：stackabuse

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

Vue Router 4 已經發布了，咱們來看看新版本中有哪些很酷的特性。

Vue3 支持

Vue 3 引入了createApp API，該API更改了將插件添加到Vue實例的方式。 所以，之前版本的Vue Router將與Vue3不兼容。

Vue Router 4 引入了createRouter API，該API建立了一個能夠在Vue3中安裝 router 實例。

// 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哈希來模擬完整的URL，以便在URL更改時不會從新加載頁面。 history 模式利用 HTML5 History API 來實現URL導航，也是無需從新加載頁面。

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

在Vue Router 4中，這些模式已被抽象到模塊中，能夠將其導入並分配給新的history 選項。 這種額外的靈活性讓咱們能夠根據須要自定義路由器。

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

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

動態路由

Vue Router 4 提供了addRoute 方法實現動態路由。

這個方法平時比較少用到，可是確實有一些有趣的用例。 例如，假設咱們要爲文件系統應用程序建立UI，而且要動態添加路徑。 咱們能夠按照如下方式進行操做：

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

咱們還可使用如下相關方法：

• removeRoute
• hasRoute
• getRoutes

導航守衛能夠返回值並不是next

導航守衛是Vue Router的鉤子，容許用戶在跳轉以前或以後運行自定義邏輯，例如 beforeEach，beforeRouterEnter等。

它們一般用於檢查用戶是否有權訪問某個頁面，驗證動態路由參數或銷燬偵聽器。

在版本4中，咱們能夠從hook 方法中中返回值或Promise。 這樣能夠方便快捷地進行以下操做：

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

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

這些只是版本4中添加的一些新特性，你們能夠到官網去了解一下更多的信息。

~完，我是前端小智，去保建了，咱們下期見~

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://vuejsdevelopers.com/t...

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。