Vue 2 和 Vue 3 在路由封裝方面有一些區(qū)別，主要體現(xiàn)在 Vue Router 版本的升級(jí)（Vue Router 3 -> Vue Router 4）上。下面我們來(lái)對(duì)比一下 Vue 2 和 Vue 3 在路由封裝上的主要區(qū)別，并提供相應(yīng)的代碼示例。

---

1. Vue 2 路由封裝（基于 Vue Router 3）

Vue 2 使用 Vue.use(VueRouter) 注冊(cè)路由，并且 new VueRouter({}) 創(chuàng)建路由實(shí)例。

安裝 Vue Router 3

npm install vue-router@3

router/index.js（Vue 2 版）

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";Vue.use(VueRouter);const routes = [{path: "/",name: "Home",component: Home,},{path: "/about",name: "About",component: About,},
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;

main.js（Vue 2 版）

import Vue from "vue";
import App from "./App.vue";
import router from "./router";Vue.config.productionTip = false;new Vue({router, // 掛載路由render: (h) => h(App),
}).$mount("#app");

---

2. Vue 3 路由封裝（基于 Vue Router 4）

Vue 3 需要使用 createRouter 和 createWebHistory 創(chuàng)建路由，并且 app.use(router) 掛載。

安裝 Vue Router 4

npm install vue-router@4

router/index.js（Vue 3 版）

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

main.js（Vue 3 版）

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";const app = createApp(App);app.use(router); // 掛載路由
app.mount("#app");

---

3. Vue 2 和 Vue 3 路由封裝的主要區(qū)別

對(duì)比項(xiàng)	Vue 2 (Vue Router 3)	Vue 3 (Vue Router 4)
路由注冊(cè)	Vue.use(VueRouter)	createRouter() + app.use(router)
路由實(shí)例創(chuàng)建	new VueRouter({})	createRouter({})
路由模式	mode: 'history' / mode: 'hash'	history: createWebHistory() / createWebHashHistory()
router.beforeEach	直接使用 router.beforeEach	直接使用 router.beforeEach
this.$router	組件內(nèi)部可用	組件內(nèi)部可用
this.$route	組件內(nèi)部可用	組件內(nèi)部可用
router.push()	this.$router.push('/about')	this.$router.push('/about')

---

4. 路由守衛(wèi)封裝

Vue 2 全局前置守衛(wèi)

router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next("/login");} else {next();}
});

Vue 3 全局前置守衛(wèi)（寫法一致）

router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next("/login");} else {next();}
});

---

5. 動(dòng)態(tài)路由注冊(cè)

Vue 2 添加動(dòng)態(tài)路由

router.addRoutes([{path: "/dynamic",name: "Dynamic",component: () => import("@/views/Dynamic.vue"),},
]);

Vue 3 添加動(dòng)態(tài)路由（不同）

router.addRoute({path: "/dynamic",name: "Dynamic",component: () => import("@/views/Dynamic.vue"),
});

---

6. 路由懶加載

Vue 2 和 Vue 3 的路由懶加載寫法基本相同：

const routes = [{path: "/",name: "Home",component: () => import("@/views/Home.vue"),},
];

---

7. setup 中使用路由（Vue 3 專屬）

Vue 3 組合式 API 使用 useRouter 和 useRoute 訪問(wèn)路由：

import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";export default {setup() {const router = useRouter();const route = useRoute();onMounted(() => {console.log("當(dāng)前路徑：", route.path);});const goToHome = () => {router.push("/");};return { goToHome };},
};

---

8. 結(jié)論

• Vue 3 需要使用 createRouter，不再使用 Vue.use(VueRouter)。
• Vue 3 需要 app.use(router) 掛載，而 Vue 2 在 new Vue({ router }) 中掛載。
• Vue 3 組合式 API 可以用 useRouter 和 useRoute 獲取路由信息，Vue 2 仍使用 this.$router 和 this.$route。
• addRoutes 改為 addRoute，但功能類似。

總體來(lái)說(shuō)，Vue 3 使路由 API 變得更加模塊化，適配了 setup 語(yǔ)法，但大多數(shù)核心概念和 Vue 2 保持一致。

你是要封裝 Vue 3 版本的路由嗎？還是希望對(duì) Vue 2 的封裝進(jìn)行優(yōu)化？