Vue Router4主要变化

作者：陈川阅读数：62251人阅读分类： Vue.js

Vue Router4是Vue.js官方路由库的重大版本升级，与Vue3保持同步发布。它在API设计、功能实现和性能优化等方面进行了全面重构，同时保持了核心路由概念的延续性。下面从多个维度分析其关键变化。

路由创建方式的变化

Vue Router4不再使用new Router()构造函数，改为采用createRouter工厂函数。这种变化与Vue3的Composition API风格保持一致：

// Vue Router3写法
const router = new VueRouter({
  routes: [...]
})

// Vue Router4写法
import { createRouter } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

历史记录模式也改为通过单独函数引入：

createWebHistory() 对应原来的history模式
createWebHashHistory() 对应hash模式
createMemoryHistory() 用于SSR场景

路由匹配语法升级

动态路由匹配语法进行了重大调整，使用path-to-regexp库替代了原有实现：

// 旧版语法
{ path: '/user/:id(\\d+)' }

// 新版语法
{ 
  path: '/user/:id',
  regex: /^\d+$/ // 使用正则表达式验证参数
}

通配符路由*被移除，需改用自定义正则：

// 替代方案
{ path: '/:path(.*)*', component: NotFound }

路由守卫API重构

导航守卫系统进行了全面改造，与Composition API深度集成：

// 全局守卫变化
router.beforeEach((to, from) => {
  // 返回false取消导航
  // 可返回路由地址字符串或路由位置对象
})

// 组件内守卫改为Composition API形式
import { onBeforeRouteLeave } from 'vue-router'
setup() {
  onBeforeRouteLeave((to, from) => {
    // 离开守卫逻辑
  })
}

新增beforeResolve守卫执行时机，位于beforeEach之后、afterEach之前。

路由元信息类型系统

路由元信息meta字段现在支持强类型定义：

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    transitionName?: string
  }
}

const routes: RouteRecordRaw[] = [
  {
    path: '/admin',
    meta: { requiresAuth: true } // 现在有类型检查
  }
]

动态路由API改进

添加和删除路由的API变得更加直观：

// 添加单个路由
router.addRoute({
  path: '/new',
  component: NewPage
})

// 添加嵌套路由
router.addRoute('parent', {
  path: 'child',
  component: Child
})

// 删除路由
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 移除该路由

新增hasRoute()和getRoutes()方法用于路由检测和获取。

滚动行为API变化

滚动行为配置现在返回的对象结构与原生DOM API一致：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition // 保持原生滚动位置
    }
    return { top: 0 } // 使用现代滚动API格式
  }
})

路由懒加载语法

配合Vue3的defineAsyncComponent实现代码分割：

// Vue Router4推荐方式
const UserDetails = () => import('./views/UserDetails.vue')

// 或者使用defineAsyncComponent
import { defineAsyncComponent } from 'vue'
const UserDetails = defineAsyncComponent(() => 
  import('./views/UserDetails.vue')

命名路由与重定向

命名路由的用法有所调整，重定向支持更灵活的配置：

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    alias: '/welcome' // 别名配置
  },
  {
    path: '/legacy',
    redirect: { name: 'home' } // 支持命名路由重定向
  }
]

与Composition API集成

在setup函数中访问路由信息的方式：

import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    // 访问当前路由参数
    console.log(route.params.id)
    
    // 编程式导航
    function navigate() {
      router.push({ name: 'user', params: { id: 123 } })
    }
    
    return { navigate }
  }
}