Vue3 中引入的 Vue Router 4 与 Vue Router 3 有哪些不同之处？

Vue.js 是目前最受欢迎的前端框架之一，而 Vue Router 作为 Vue.js 的官方路由器，负责实现单页面应用的路由功能。随着 Vue3 的发布，Vue Router 4 作为与之配套的新特性也引起了广泛关注。在本篇博客中，我们将深入探讨 Vue Router 4 与 Vue Router 3 之间的不同之处。

1. 路由定义方式

Vue Router 3

在 Vue Router 3 中，通常使用对象字面量的方式来定义路由：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

Vue Router 4

Vue Router 4 引入了一个新的 createRouter 函数，使得路由的定义更加简洁，同时与 Vue3 的 Composition API 风格更一致：

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

2. 动态路由

Vue Router 3

在 Vue Router 3 中，可以通过路由参数来实现动态路由：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});

Vue Router 4

在 Vue Router 4 中，动态路由的实现方式保持不变，但可以通过 Vue3 的 Composition API 更方便地访问路由参数：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log(route.params.id);
  }
};

3. 导航守卫

Vue Router 3

在 Vue Router 3 中，通过导航守卫可以实现路由跳转的控制，如下所示：

const router = new VueRouter({
  routes: [...],
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !auth.isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

Vue Router 4

在 Vue Router 4 中，导航守卫的写法有了一些简化和调整，next 函数不再是必须的，可以直接返回路由路径或 false 来控制导航：

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !auth.isAuthenticated) {
    return '/login';
  }
});

4. 路由动画

Vue Router 3

在 Vue Router 3 中，通过 <transition> 组件可以轻松实现路由切换时的过渡动画：

<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

Vue Router 4

Vue Router 4 支持使用更丰富的过渡钩子函数，如 page-enter、page-leave 来控制页面过渡效果，尽管 <transition> 依旧可以使用：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...]
});

router.beforeEach((to, from) => {
  return to.path === '/' ? { x: 0, y: 0 } : { x: 0, y: 100 };
});

5. 其他改进

Router history API：Vue Router 4 将路由历史记录的管理进一步模块化，提供了 createWebHistory、createWebHashHistory 和 createMemoryHistory 等不同的历史记录模式。
Composition API 支持：Vue Router 4 与 Vue3 的 Composition API 更加紧密集成，允许开发者在 setup 函数中直接使用路由对象和方法，简化了路由操作。

总结

Vue Router 4 作为 Vue3 的配套升级版本，带来了诸多改进和优化，简化了路由配置、增强了导航守卫的灵活性，并且更好地支持 Vue3 的 Composition API。通过对比，我们可以看到 Vue Router 4 在代码风格和开发体验上的显著提升，有助于开发者更高效地构建复杂的单页面应用。

在实际开发中，根据项目的需求选择合适的 Vue Router 版本，将有助于提升项目的开发效率和用户体验。