vue2路由和vue3路由区别及原理

一、Vue2 与 Vue3 路由的区别

1. 创建路由实例方式的不同

Vue 2 中，通过 Vue.use() 注册路由插件，并通过 new VueRouter() 来创建路由实例。

import Vue from 'vue';import VueRouter from 'vue-router';import Home from '@/components/Home.vue';Vue.use(VueRouter);const routes = [  { path: '/', component: Home }];const router = new VueRouter({  routes});new Vue({  router,  render: h => h(App)}).$mount('#app');

Vue 3 中，通过 createRouter 和 createWebHistory 等 API 创建路由实例，直接使用 app.use() 挂载，不再需要 Vue.use() 来注册插件。

import { createApp } from 'vue';import { createRouter, createWebHistory } from 'vue-router';import Home from '@/components/Home.vue';import App from './App.vue';const routes = [  { path: '/', component: Home }];const router = createRouter({  history: createWebHistory(),  routes});const app = createApp(App);app.use(router);app.mount('#app');

2. 动态路由的添加方式

Vue 2 中使用 addRoutes() 来动态添加多个路由，这个方法已经在 Vue 3 中被移除。

router.addRoutes([  { path: '/about', component: About }]);

Vue 3 中使用 addRoute() 来动态添加单个路由，且可以指定父级路由进行嵌套路由的动态添加。

router.addRoute({ path: '/about', component: About });router.addRoute('parent', { path: 'child', component: Child });

3. 路由守卫的变化

Vue 3 在组合式 API (setup) 中新增了 onBeforeRouteUpdate 和 onBeforeRouteLeave 这两个钩子，可以直接在 setup 中使用，而不再依赖组件选项（Options API）。

Vue 2 中，路由守卫在组件选项中定义。

export default {  beforeRouteEnter(to, from, next) {    // 在进入组件前调用    next();  },  beforeRouteUpdate(to, from, next) {    // 路由更新时调用    next();  },  beforeRouteLeave(to, from, next) {    // 离开组件时调用    next();  }};

Vue 3 中，可以在 setup 中直接使用 onBeforeRouteUpdate 和 onBeforeRouteLeave。

import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';export default {  setup() {    onBeforeRouteLeave((to, from) => {      // 路由离开时触发的守卫    });    onBeforeRouteUpdate((to, from) => {      // 路由更新时触发的守卫    });  }};

4. 组合式 API 的支持

Vue 3 使用了 useRouter 和 useRoute 这两个 Composition API，能够在 setup 中方便地访问路由实例和路由信息。这在 Vue 2 中是无法做到的，因为 Vue 2 的 vue-router 与 Options API 深度耦合。

import { useRouter, useRoute } from 'vue-router';export default {  setup() {    const router = useRouter();    const route = useRoute();    const goToHome = () => {      router.push({ name: 'Home' });    };    return { goToHome, route };  }};

5. 路由模式的选择

Vue 2 中，使用 mode 参数来决定使用 history 还是 hash 模式。

const router = new VueRouter({  mode: 'history',  // 或者 'hash'  routes});

Vue 3 中，使用 createWebHistory() 或 createWebHashHistory() 明确区分路由模式。

const router = createRouter({  history: createWebHistory(),  // 或者 createWebHashHistory()  routes});

6. 其他差异

更好的 TypeScript 支持：Vue 3 和 vue-router@4 对 TypeScript 进行了优化，提供了完整的类型推断和类型检查。
过渡效果改进：Vue 3 的 <router-view> 支持新的 v-slot 用法来控制过渡效果。

二、Vue Router 的原理解析

1. 路由的核心原理

Vue Router 的核心原理就是通过 Hash 模式 或 History 模式 来监听 URL 的变化，从而实现视图组件的动态切换。

Hash 模式：通过监听 window.onhashchange 事件来感知 URL 中 # 后面内容的变化。
History 模式：基于 window.history.pushState 和 window.history.replaceState API 来修改 URL，并通过 popstate 事件监听 URL 的变化。