一文帶你去看看Vue Router4中的酷炫功能-Vue.js-PHP中文網

一文帶你去看看Vue Router4中的酷炫功能

青灯夜游

發布： 2021-06-04 19:27:14

轉載

2697 人瀏覽過

這篇文章和大家一下了解下Vue Router4中的酷炫功能。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

一文帶你去看看Vue Router4中的酷炫功能

Vue Router 4 已經發佈了，讓我們來看看新版本中有哪些很酷的功能。【相關推薦：《vue.js教學》】

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中新增的一些新特性，大家可以到官網去了解更多的資訊。