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 的变化，从而实现视图组件的动态切换。

1. Hash 模式：通过监听 window.onhashchange 事件来感知 URL 中 # 后面内容的变化。

2. History 模式：基于 window.history.pushState 和 window.history.replaceState API 来修改 URL，并通过 popstate 事件监听 URL 的变化。

2. 路由匹配机制

Vue Router 的路由匹配基于路由表 (routes) 进行匹配。它使用了 path-to-regexp 库将 path 转换成正则表达式，并与当前 URL 进行比对，从而找到合适的路由。

• 每个路由规则（RouteRecord）都包含 path、component 等信息。

• 在匹配过程中，会将路由表中的每一个 RouteRecord 进行遍历，并基于路径解析进行比对。

• 一旦找到匹配的路由规则，就会渲染对应的组件。

3. 导航守卫执行顺序

Vue Router 提供了三种导航守卫：全局守卫、路由独享守卫和组件内守卫。它们的执行顺序如下：

1. 全局前置守卫 (beforeEach)

2. 路由独享守卫 (beforeEnter)

3. 组件内守卫 (beforeRouteEnter)

4. 全局解析守卫 (beforeResolve)

5. 全局后置守卫 (afterEach)

4. 路由切换过程

• 路由解析：在 router.push 或者 URL 变化时，路由会首先匹配路由表中符合条件的路由规则。

• 执行导航守卫：依次执行全局、路由独享和组件内的导航守卫。

• 更新视图：在守卫全部通过后，更新组件树，重新渲染 router-view 视图。

三、总结

Vue 3 的 vue-router@4 相较于 Vue 2 更加现代化和灵活，并且对 TypeScript 进行了更好的支持。与此同时，Vue 3 的路由实现基于 Composition API，使其能够更好地与 Vue 3 的设计理念相契合，提升了开发体验和可维护性。