从Vue 2到Vue 3：深入了解路由配置的变化与升级建议

一、背景与问题

在Vue 3正式发布后，其核心框架的重构带来了诸多变化，其中路由配置的调整是开发者需要重点关注的部分。Vue Router 4作为Vue 3的配套路由库，引入了基于Composition API的全新实现方式，其核心变化包括：

从Vue Router到@vue/router的命名变更
弃用router.map和router.addRoutes方法
引入createRouter和createWebHistory等新API
强化对动态导入和异步组件的支持
改进路由守卫的执行机制

这些变化对现有Vue 2项目升级带来显著影响，本文将深入解析Vue 3路由配置的底层原理，并提供可落地的升级方案。

二、基本原理

1. 响应式系统与路由联动

Vue 3采用Proxy + Reflect实现的响应式系统，与Vue 2的Object.defineProperty有本质区别。在路由配置中，这种差异体现在：

// Vue 2方式
this.$router.push('/about')

// Vue 3方式
router.push('/about')

在Vue 3中，router对象本身就是响应式对象，其currentRoute属性会自动追踪路由变化，这使得开发者可以更自然地使用计算属性和watch来响应路由变化：

const currentRoute = useRoute()
watch(() => currentRoute.path, (newPath) => {
  console.log('路由变化:', newPath)
})

2. 路由实例创建机制

Vue 3的路由实例创建采用工厂模式，通过createRouter函数生成：

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

这种设计使得路由配置更接近现代前端框架的架构模式，也便于与Vue 3的Composition API深度集成。

三、环境准备

1. 项目初始化

使用Vue CLI创建新项目：

vue create vue3-router-demo

在package.json中确认依赖版本：

{
  "dependencies": {
    "vue": "^3.2.0",
    "@vue/router": "^4.1.0"
  }
}

2. 依赖安装

npm install @vue/router

四、核心实现

1. Vue 2路由配置示例

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

2. Vue 3路由配置示例

import { createRouter, createWebHistory, RouteRecordRaw } from '@vue/router'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 动态路由配置示例

import { createRouter, createWebHistory, RouteRecordRaw } from '@vue/router'
import Home from './components/Home.vue'

const routes: RouteRecordRaw[] = [
  { 
    path: '/user/:id', 
    component: Home,
    props: (route) => ({ userId: route.params.id })
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

五、完整案例

1. 项目结构

src/
├── App.vue
├── main.ts
├── router/
│   └── index.ts
├── components/
│   ├── Home.vue
│   └── About.vue
└── views/
    └── UserView.vue

2. 路由配置文件 (src/router/index.ts)

import { createRouter, createWebHistory, RouteRecordRaw } from '@vue/router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import UserView from '@/views/UserView.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'about',
        component: About
      },
      {
        path: 'user/:id',
        component: UserView,
        props: (route) => ({ userId: route.params.id })
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 主入口文件 (src/main.ts)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

4. 动态路由使用示例 (src/views/UserView.vue)

<template>
  <div>
    <h1>User Info</h1>
    <p>User ID: {{ userId }}</p>
    <p>Route Path: {{ $route.path }}</p>
  </div>
</template>

<script>
export default {
  props: {
    userId: {
      type: String,
      required: true
    }
  }
}
</script>

六、源码解析

1. 路由实例创建流程

createRouter函数内部会创建一个Router实例，其核心属性包括：

class Router {
  private history: History
  private routes: RouteRecordRaw[]
  private currentRoute: Route
  // ...
}

在初始化时，会通过createWebHistory()创建历史记录实例，该实例负责处理URL变化和路由跳转。

2. 路由守卫机制

Vue 3的路由守卫分为全局守卫和组件级守卫，其执行顺序与Vue 2不同：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/secure',
      component: SecurePage,
      beforeEnter: (to, from, next) => {
        if (isAuthenticated) {
          next()
        } else {
          next('/login')
        }
      }
    }
  ]
})

全局守卫在beforeEach中注册，组件级守卫通过beforeRouteEnter等方法定义。

七、进阶使用

1. 动态路由参数处理

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id(\\d+)',
      component: UserView,
      props: (route) => ({ userId: parseInt(route.params.id) })
    }
  ]
})

正则表达式用于限制参数类型，props函数将参数转换为数值类型。

2. 异步组件加载

const routes: RouteRecordRaw[] = [
  {
    path: '/lazy',
    component: () => import('./components/LazyComponent.vue')
  }
]

Vue 3支持动态导入，这比Vue 2的component: () => import(...)方式更简洁。

3. 嵌套路由优化

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: 'dashboard',
        component: Dashboard
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
]

嵌套路由的children属性支持嵌套结构，可通过$route.meta进行路由级别的权限控制。

八、性能与工程实践

1. 路由懒加载优化

const routes: RouteRecordRaw[] = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

通过动态导入实现路由懒加载，可显著提升首屏加载速度。

2. 路由缓存策略

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/cache',
      component: () => import('./views/CacheView.vue'),
      meta: { keepAlive: true }
    }
  ]
})

通过keepAlive属性启用组件缓存，但需注意内存管理。

3. 服务端渲染 (SSR)

// server.js
import { createServer, createProxyMiddleware } from 'http'
import { renderToString } from 'vue-server-renderer'
import { createApp } from './main'
import { router } from './router'

createServer((req, res) => {
  if (req.url === '/api') {
    res.end('API Response')
  } else {
    const app = createApp()
    const context = {}
    const html = renderToString(app, router, context)
    res.end(html)
  }
})

SSR需要处理路由状态和服务器端渲染逻辑。

九、常见问题与踩坑

1. 路由实例错误

错误示例：

const router = new VueRouter({ /* ... */ })

原因： Vue 3中不再使用new VueRouter()，应使用createRouter函数。

2. 动态导入路径错误