网站代码管理杭州开发app
Vue 2 和 Vue 3 在路由封装方面有一些区别，主要体现在 Vue Router 版本的升级（Vue Router 3 -> Vue Router 4）上。下面我们来对比一下 Vue 2 和 Vue 3 在路由封装上的主要区别，并提供相应的代码示例。
1. Vue 2 路由封装（基于 Vue Router 3）
Vue 2 使用 Vue.use(VueRouter) 注册路由，并且 new VueRouter({}) 创建路由实例。
安装 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 创建路由，并且 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 路由封装的主要区别
| 对比项 | Vue 2 (Vue Router 3) | Vue 3 (Vue Router 4) |
|---|---|---|
| 路由注册 | Vue.use(VueRouter) | createRouter() + app.use(router) |
| 路由实例创建 | new VueRouter({}) | createRouter({}) |
| 路由模式 | mode: 'history' / mode: 'hash' | history: createWebHistory() / createWebHashHistory() |
router.beforeEach | 直接使用 router.beforeEach | 直接使用 router.beforeEach |
this.$router | 组件内部可用 | 组件内部可用 |
this.$route | 组件内部可用 | 组件内部可用 |
router.push() | this.$router.push('/about') | this.$router.push('/about') |
4. 路由守卫封装
Vue 2 全局前置守卫
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next("/login");} else {next();}
});
Vue 3 全局前置守卫（写法一致）
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next("/login");} else {next();}
});
5. 动态路由注册
Vue 2 添加动态路由
router.addRoutes([{path: "/dynamic",name: "Dynamic",component: () => import("@/views/Dynamic.vue"),},
]);
Vue 3 添加动态路由（不同）
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 访问路由：
import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";export default {setup() {const router = useRouter();const route = useRoute();onMounted(() => {console.log("当前路径：", route.path);});const goToHome = () => {router.push("/");};return { goToHome };},
};
8. 结论
- 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，但功能类似。
总体来说，Vue 3 使路由 API 变得更加模块化，适配了 setup 语法，但大多数核心概念和 Vue 2 保持一致。
你是要封装 Vue 3 版本的路由吗？还是希望对 Vue 2 的封装进行优化？