🤍 前端開發工程師、技術日更博主、已過CET6
🍨 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1
🕠 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》
🍚 藍橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發企業級健康管理項目》、《帶你從入門到實戰全面掌握 uni-app》

隨著前端技術的不斷發展，單頁面應用（SPA）變得越來越流行。為了更好地管理頁面間的導航和狀態，Vue.js 生態系統中的 Vue-Router 也不斷進化。本文將介紹 Vue-Router 4.0 的新特性、使用方法以及與前代版本的對比。

一、Vue-Router 4.0 新特性

1. Composition API 支持

Vue-Router 4.0 完全支持 Vue 3 的 Composition API，這使得路由配置和邏輯更加模塊化和可維護。

2. 更簡潔的 API 設計

新版本的 Vue-Router 簡化了 API 設計，移除了一些過時的方法和選項，使得路由配置更加直觀。

3. 基于 Proxy 的路由匹配

Vue-Router 4.0 使用 Proxy 實現了更高效的路由匹配，提升了性能。

4. 新的導航守衛

引入了新的導航守衛，如 beforeEach、beforeResolve 和 afterEach，提供了更細粒度的路由控制。

5. 支持 TypeScript

Vue-Router 4.0 完全支持 TypeScript，提供了更好的類型推斷和開發體驗。

二、快速上手

1. 安裝

首先，你需要安裝 Vue-Router 4.0：

npm install vue-router@4

2. 創建路由實例

創建一個 router.js 文件，配置你的路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];const router = createRouter({
history: createWebHistory(),
routes,
});export default router;

3. 在 Vue 應用中使用路由

在你的主 Vue 文件中引入并使用路由：

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

三、導航守衛

1. 全局守衛

在 router.js 中配置全局守衛：

router.beforeEach((to, from, next) => {
// 導航邏輯...
next();
});

2. 組件內守衛

在組件內部使用路由守衛：

import { onBeforeRouteEnter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';export default {
// ...
setup() {
onBeforeRouteEnter((to, from, next) => {
// ...
next();
});
onBeforeRouteUpdate((to, from) => {
// ...
});
onBeforeRouteLeave((to, from, next) => {
// ...
next();
});
}
};

四、總結

Vue-Router 4.0 是為 Vue 3 設計的新一代路由管理器，它帶來了更簡潔的 API、更好的性能和更強大的功能。無論是對于新手還是資深開發者，Vue-Router 4.0 都將提供更好的開發體驗和更高的開發效率。

隨著前端技術的不斷進步，Vue-Router 也將繼續發展，以滿足日益增長的前端開發需求。