Vue 2 和 Vue 3 的 Router小白也能轻松上手的页面跳转管理

在前端开发的世界里，Vue.js 是一款超级受欢迎的框架。当我们用 Vue.js 构建单页面应用（SPA）时，页面跳转是一个非常重要的功能。Vue 2 和 Vue 3 都有自己的一套 Router 系统，它们既有相似之处，也有不少区别。接下来，我就好好跟你唠唠 Vue 2 和 Vue 3 的 Router 的那些事儿，保证让你这个小白也能一听就懂。

一、Vue 2 和 Vue 3 Router 的相似点

1.1 核心功能

Vue 2 和 Vue 3 的 Router 都是用来管理页面跳转的工具。它们都支持定义不同的路径，每个路径对应一个组件。例如，在 Vue 2 和 Vue 3 中，都可以通过定义路径 “/home” 对应首页组件，路径 “/product” 对应商品列表组件，路径 “/cart” 对应购物车组件等。它们都支持动态路径参数、嵌套路由和编程式导航等高级特性。

1.2 基本用法

在 Vue 2 和 Vue 3 中，都可以通过 router - link 和 router - view 来实现页面跳转和显示对应的组件。router - link 用于创建页面跳转的链接，router - view 用于显示当前路径对应的组件。

1.3 路由守卫

Vue 2 和 Vue 3 都支持全局前置守卫（beforeEach）和全局后置守卫（afterEach），用于在页面跳转前后执行一些逻辑操作。例如，在用户未登录时，限制访问某些页面。

二、Vue 2 和 Vue 3 Router 的不同点

2.1 路由注册

Vue 2 ：使用 Vue.use(VueRouter) 注册路由，并通过 new VueRouter({}) 创建路由实例。

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({  
  routes
});

Vue 3 ：使用 createRouter 和 createWebHistory 创建路由实例，并通过 app.use(router) 挂载路由。

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({  
  history: createWebHistory(),  
  routes
});
const app = createApp(App);
app.use(router);
app.mount('#app');

2.2 路由实例创建

Vue 2 ：使用 new VueRouter({}) 创建路由实例。

Vue 3 ：使用 createRouter({}) 创建路由实例。

2.3 路由模式

Vue 2 ：通过 mode: 'history' 或 mode: 'hash' 来设置路由模式。

Vue 3 ：通过 history: createWebHistory() 或 createWebHashHistory() 来设置路由模式。

2.4 动态路由注册

Vue 2 ：使用 router.addRoutes() 方法添加动态路由。

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

Vue 3 ：使用 router.addRoute() 方法添加动态路由。

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

2.5 组合式 API

Vue 3 ：引入了组合式 API，可以通过 useRouter 和 useRoute 在组件的 setup 函数中访问路由信息。

import { useRouter, useRoute } from 'vue-router';
export default {  
  setup() {    
    const router = useRouter();  
    const route = useRoute();   
    return { router, route }; 
  }
};

Vue 2 ：没有组合式 API，仍然使用 this.$router 和 this.$route 来访问路由信息。

2.6 性能优化

Vue 3 ：在性能方面进行了大量优化，包括静态节点提升、Tree - shaking 等，使得路由的初始化速度和渲染效率都有显著提高 。

2.7 TypeScript 支持

Vue 3 ：与 TypeScript 的集成更加紧密，提供了更强大的类型推断和更完善的类型定义，方便开发者使用 TypeScript 。

三、总结

Vue 3 的 Router 在功能上与 Vue 2 的 Router 保持了一致，但在实现方式上更加模块化和现代化，适配了 Vue 3 的新特性，如组合式 API 和 TypeScript 支持。如果你正在考虑从 Vue 2 迁移到 Vue 3，这些变化是需要特别注意的。不过，无论是 Vue 2 还是 Vue 3 的 Router，它们的核心理念和基本用法都是相似的，掌握其中一个版本的 Router 后，学习另一个版本的 Router 也会相对容易很多。