Vue Router 在 Vue 2 和 Vue 3 中的主要差别

1. 安装与版本

• Vue 2: 使用 Vue Router 3.x 版本。
• Vue 3: 使用 Vue Router 4.x 版本，需要单独安装 vue-router@4。

# Vue 2
npm install vue-router@3

# Vue 3
npm install vue-router@4

2. 创建路由器实例

• Vue 2: 使用 new VueRouter({ routes })。
• Vue 3: 使用 createRouter 函数，并指定历史记录模式。

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

// Vue 3
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes
});

3. 路由配置

• Vue 2 和 Vue 3: 路由配置基本相同，但 Vue 3 中的组件需要使用 import 动态加载。
• Vue 3: 支持更灵活的路由配置，如嵌套路由的写法略有不同。

// Vue 2 和 Vue 3 的路由配置基本一致，但 Vue 3 更加灵活
const routes = [
  {
    path: '/index',
    component: Index,
    children: [
      {
        path: 'like',
        component: Like
      }
    ]
  }
];

4. 编程式导航

• Vue 2: 使用 this.$router 进行编程式导航。
• Vue 3: 推荐使用 useRouter 和 useRoute 组合式 API。

// Vue 2
this.$router.push('/path');

// Vue 3 (选项式)
this.$router.push('/path');

// Vue 3 (组合式)
import { useRouter } from 'vue-router';
const router = useRouter();
router.push('/path');

5. 路由守卫

• Vue 2 和 Vue 3: 路由守卫的基本用法一致，但在 Vue 3 中有一些细微的差别，如 beforeEach 的写法。

// Vue 2 和 Vue 3 的全局前置守卫写法一致
router.beforeEach((to, from, next) => {
  // ...
});

6. 组件内的路由守卫

• Vue 2: 使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。
• Vue 3: 在 setup 语法糖中使用 onBeforeRouteLeave 和 onBeforeRouteUpdate，没有 onBeforeRouteEnter。

// Vue 2
export default {
  beforeRouteEnter(to, from, next) {
    console.log(`进入路由组件之前“${to.meta.title}`);
    next();
  }
};

// Vue 3 (setup 语法糖)
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteLeave(() => {
  let flag = window.confirm('你确定要离开吗');
  return flag;
});

7. 路由元信息

• Vue 2 和 Vue 3: 都支持在路由配置中添加 meta 字段，用于存储额外的信息，如权限控制、标题等。

const routes = [
  {
    path: '/car',
    component: Car,
    meta: {
      isAuth: true,
      title: '购物车'
    }
  }
];

8. 性能优化

• Vue 3: 更好地支持路由懒加载，可以通过动态导入组件来提升性能。

const routes = [
  {
    path: '/index',
    component: () => import('../views/Index.vue')
  }
];

总结

Vue Router 在 Vue 2 和 Vue 3 中的核心概念和使用方式大致相同，但在 Vue 3 中有一些语法和 API 的更新，特别是在组合式 API 的支持和组件内守卫的使用上。如果从 Vue 2 迁移到 Vue 3，需要注意这些变化并相应地更新代码。