本篇文章和大家一下了解下Vue Router4中的酷炫功能涵卵。有一定的參考價值变隔，有需要的朋友可以參考一下，希望對大家有所幫助做盅。
Vue Router 4 已經(jīng)發(fā)布了，我們來看看新版本中有哪些很酷的特性窘哈〈盗瘢【相關(guān)推薦：《vue.js教程》】
Vue3 支持
Vue 3 引入了createApp API，該API更改了將插件添加到Vue實例的方式滚婉。 因此图筹，以前版本的Vue Router將與Vue3不兼容。
Vue Router 4 引入了createRouter API让腹，該API創(chuàng)建了一個可以在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 來實現(xiàn)URL導(dǎo)航像鸡，也是無需重新加載頁面。
// Vue Router 3
const router = new VueRouter({
mode: "history",
routes: [...]
});
在Vue Router 4中哈恰，這些模式已被抽象到模塊中只估，可以將其導(dǎo)入并分配給新的history 選項。 這種額外的靈活性讓我們可以根據(jù)需要自定義路由器着绷。
// Vue Router 4
import { createRouter, createWebHistory } from "vue-router";
export default createRouter({
history: createWebHistory(),
routes: [],
});
動態(tài)路由
Vue Router 4 提供了addRoute方法實現(xiàn)動態(tài)路由蛔钙。
這個方法平時比較少用到，但是確實有一些有趣的用例荠医。 例如吁脱，假設(shè)我們要為文件系統(tǒng)應(yīng)用程序創(chuàng)建UI桑涎，并且要動態(tài)添加路徑。 我們可以按照以下方式進(jìn)行操作：
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的鉤子兼贡，允許用戶在跳轉(zhuǎn)之前或之后運行自定義邏輯攻冷，例如 beforeEach，beforeRouterEnter等遍希。
它們通常用于檢查用戶是否有權(quán)訪問某個頁面等曼，驗證動態(tài)路由參數(shù)或銷毀偵聽器。
在版本4中凿蒜，我們可以從hook 方法中中返回值或Promise禁谦。 這樣可以方便快捷地進(jìn)行如下操作：
// Vue Router 3
router.beforeEach((to, from, next) => {
if (!isAuthenticated) {
next(false);
}
else {
next();
}
})
// Vue Router 4
router.beforeEach(() => isAuthenticated);
這些只是版本4中添加的一些新特性，大家可以到官網(wǎng)去了解一下更多的信息废封。
英文原文地址：https://vuejsdevelopers.com/topics/vue-router/
作者：Matt Maribojoc
更多編程相關(guān)知識州泊，請訪問：編程視頻！虱饿！
