vue2和vue3路由封装及区别

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 的封装进行优化？