12.2 基础配置：路由映射、嵌套路由、动态路由、重定向

Vue Router 的配置核心是一个路由数组，每个路由对象描述一条 URL 与组件的映射关系。以下是一个实际项目中的路由器创建步骤：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  // 路由规则将在这里填入
]

const router = createRouter({
  history: createWebHistory(),   // 使用 HTML5 history 模式
  routes
})

export default router

然后在 main.js 中通过 app.use(router) 注册，这样所有组件内都可以使用 $router 和 $route。

路由映射：让路径与组件配对

最简单的情形：一个路径对应一个页面组件。

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

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

懒加载推荐：如果应用体积较大，应该使用动态导入，让每个页面只在被访问时才加载。
@@SNAPSHOT_BLOCK_2@@
这样打包时会自动分割出独立的 chunk，首屏只加载必需的代码。

嵌套路由：在布局中切换子视图

后台管理系统最常见的场景：侧边栏和顶栏保持不变，中间内容区域根据路由切换。实现方式是在父组件中放置 <router-view>，并在路由配置中用 children 定义嵌套规则。

父路由配置：

const routes = [
  {
    path: '/admin',
    component: () => import('@/views/AdminLayout.vue'),
    children: [
      {
        path: 'users',              // 注意：不要写成 /users
        component: () => import('@/views/Users.vue')
      },
      {
        path: 'settings',
        component: () => import('@/views/Settings.vue')
      }
    ]
  }
]

AdminLayout.vue 模板：

<template>
  <div class="admin">
    <aside><!-- 侧边栏 --></aside>
    <main>
      <router-view />   <!-- 子路由的组件渲染在这个位置 -->
    </main>
  </div>
</template>

访问 /admin/users 时，AdminLayout 被渲染，其内部的 <router-view> 再渲染 Users。嵌套可以无限层级，只需在相应的父组件中继续留有 <router-view>。

动态路由：用参数匹配变化路径

多数应用需要处理带 ID 的路径，如 /user/123 查看用户详情。在路由配置中用冒号 : 标记动态参数。

const routes = [
  {
    path: '/user/:id',
    component: () => import('@/views/UserDetail.vue')
  }
]

在组件内通过 $route.params.id 获取动态值（如果是组合式 API，使用 useRoute）：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)   // 当路径为 /user/42 时，输出 42
</script>

常用搭配：结合 watch 监听参数变化，当用户从 /user/123 导航到 /user/456 时，同一个组件会被复用，不会重新创建，此时你应该手动响应参数变化来重新获取数据。
@@SNAPSHOT_BLOCK_7@@

还可以传递多个参数（如 path: '/user/:userId/post/:postId'），它们会分别存入 params 对象中。动态参数支持可选修饰符（Vue Router 4.x 需要覆盖？）——实际上，通过 (\\d+) 正则约束或 * 通配符也能实现更灵活匹配，但常规开发中 :id 已经足够。

重定向：让旧链接或默认路径优雅跳转

重定向让一个路径自动跳转到另一个路径，常用于处理首页默认展示、旧版 URL 兼容等场景。

基本写法：

const routes = [
  { path: '/', redirect: '/home' },           // 访问 / 自动跳到 /home
  { path: '/old-path', redirect: '/new-path' }
]

重定向到命名的路由： 实际项目里更推荐使用命名路由，避免硬编码路径。

{ 
  path: '/',
  redirect: { name: 'Dashboard' }
}

带参数的重定向：

{ path: '/user/:id', redirect: '/profile/:id' }

此时访问 /user/10 会调到 /profile/10。甚至可以传函数实现动态重定向：

{
  path: '/search',
  redirect: to => {
    // to 是当前路由对象，返回一个目标路径
    return { path: '/results', query: { q: to.query.keyword } }
  }
}

综合配置示例

下面是一个包含以上所有概念的路由文件骨架，实际项目中可直接参考：

const routes = [
  { path: '/', redirect: '/home' },
  { 
    path: '/home', 
    name: 'Home',
    component: () => import('@/views/Home.vue') 
  },
  {
    path: '/products',
    component: () => import('@/views/ProductLayout.vue'),
    children: [
      { path: '', component: () => import('@/views/ProductList.vue') }, 
      { path: ':id', component: () => import('@/views/ProductDetail.vue') }
    ]
  },
  { path: '/:pathMatch(.*)*', redirect: '/home' }  // 404 兜底
]

以上是 Vue Router 基础配置中最日常用到的四个核心部分，掌握它们可以应对绝大多数页面的路由需求。在后续章节将延伸到导航守卫、动态添加路由等进阶玩法。