Vue Router ：基础使用与嵌套路由实战

今天早上，对 Vue Router核心的知识点------从基础路由跳转，到嵌套路由（子路由）的从属关系进行了"review"，整理成笔记方便后续的复习，也希望能帮到正在学习这里或回顾的你们。

一、Vue Router 核心概念

Vue Router是 Vue 官方的路由管理器，专门解决单页应用（SPA）的路由跳转问题，简单说，就是URL变化时不刷新整个页面，仅替换页面中指定区域的内容，实现无刷新跳转。

核心组件 / API

• createRouter/createWebHistory：创建路由实例；
• RouterLink/router-link ：替代 <a> 标签的导航组件（取消默认刷新，支持路由跳转）；
• router-view：路由匹配组件的渲染容器（匹配到的组件会替换这个标签）；
• 路由规则 RouteRecordRaw：定义路径、路由名、对应组件的映射关系。

二、环境准备（快速上手）

在 Vue 项目中新建 src/router/index.ts（路由配置文件），并安装依赖（若未安装）：

npm install vue-router@4  

三、基础使用：一级路由

1. 配置路由规则（index.ts）

// src/router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// 直接导入组件（非懒加载）
import HomeView from '../study_tree/前后端联调/HomeView.vue'

// 定义路由规则
const routes: Readonly<RouteRecordRaw[]> = [
  {
    path: '/',        // 匹配的路径
    name: 'home',     // 路由名称（可选，用于命名式导航）
    component: HomeView, // 路径匹配时渲染的组件
  },
  {
    path: '/about',
    name: 'about',
    // 路由懒加载（推荐）：访问该路由时才加载组件，减小初始包体积
    component: () => import('../study_tree/前后端联调/AboutView.vue'),
  },
]

// 创建路由实例并导出
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), 
  routes: routes
})

export default router

2. 页面中使用路由（App.vue）

<template>
  <div>
    <!-- 1. 路由导航：RouterLink 替代 a 标签 -->
    <div>
      <!-- 路径式导航 -->
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
      <!-- 命名式导航（更灵活，依赖路由name） -->
      <router-link :to="{name:'home'}">home（命名式）</router-link>
      <router-link :to="{name:'about'}">about（命名式）</router-link>
    </div>

    <!-- 2. 路由渲染容器：匹配的组件会渲染到这里 -->
    <div class="view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
// 无需额外导入，Vue Router 注册后全局可用 RouterLink/router-view
</script>

关键说明

• RouterLink 与 router-link 均可（大小写不敏感），to 属性指定跳转路径；
• 命名式导航（:to="{name:'home'}"）比路径式更易维护（路径变化时只需改路由配置）；
• 懒加载（() => import(...)）：非首屏组件推荐使用，减少初始加载时间。（初期先不做强求）

四、进阶：嵌套路由（子路由）

嵌套路由核心是路由的从属关系 ，比如 /admin 下的 /admin/info ，需要两层 router-view 配合渲染。

1. 组件结构

src/views/admin/

├── index.vue # 父路由组件（包含子路由容器）

├── admin.vue # 子路由组件（/admin 默认显示）

└── info.vue # 子路由组件（/admin/info 显示）

父路由组件（必须包含子 router-view）：

<!-- index.ts -->
<template>
  <div>
    <div>admin 父组件</div>
    <!-- 子路由的渲染容器：子路由组件会渲染到这里 -->
    <router-view></router-view>
  </div>
</template>

子路由组件（基础结构）：

<!-- admin.vue -->
<template>
  <div>admin 子组件（默认）</div>
</template>

<!-- info.vue -->
<template>
  <div>info 子组件（/admin/info）</div>
</template>

2. 配置嵌套路由规则

// index.ts
// 补充导入组件
import Admin from '@/views/admin/admin.vue'
import Info from '@/views/admin/info.vue'
import AdminIndex from '@/views/admin/index.vue'

// 新增嵌套路由规则
const routes: Readonly<RouteRecordRaw[]> = [
  // 原有 home/about 路由...
  
  // 嵌套路由（有父组件）
  {
    path: '/admin',
    name: 'admin',
    component: AdminIndex, // 父路由组件（必须有，否则子路由无法渲染）
    children: [ // 子路由规则
      {
        path: '',         // 空路径：访问 /admin 时匹配
        name: 'adminHome',
        component: Admin,
      },
      {
        path: 'info',     // 等价于 /admin/info
        name: 'adminInfo',
        component: Info,
      },
    ]
  },

  // 反例：看似嵌套，实则一级路由
  {
    path: '/admin1',
    name: 'admin1',
    // 无父组件 component！children 路由实际为一级路由
    children: [
      {
        path: '',         // 访问 /admin1 时匹配
        name: 'adminHome1',
        component: Admin,
      },
      {
        path: 'info',     // 访问 /admin1/info 时匹配
        name: 'adminInfo1',
        component: Info,
      },
    ]
  },
]

3. 页面中跳转嵌套路由

<!-- App.vue -->
<template>
  <div>
    <!-- 嵌套路由跳转 -->
    <router-link to="/admin">admin（嵌套父路由）</router-link>
    <router-link to="/admin/info">admin info（嵌套子路由）</router-link>
    <router-link to="/admin1">admin1（伪嵌套）</router-link>
    <router-link to="/admin1/info">admin1 info（伪嵌套）</router-link>

    <!-- 一级路由容器 -->
    <router-view></router-view>
  </div>
</template>

嵌套路由核心要点

路由类型	父路由是否有 component	渲染时替换的 router-view 数量	示例
真正嵌套路由（二级）	是（如 /admin）	2 个（App.vue + AdminIndex.vue 各一个）	/admin/info 先渲染 AdminIndex，再在其内部渲染 Info
伪嵌套路由（一级）	否（如 /admin1）	1 个（仅 App.vue 里的）	/admin1/info 直接替换 App.vue 的 router-view

简单说：嵌套路由必须满足「父路由有 component + 父组件内有 router-view + children 规则」，三者缺一不可。

五、总结

• 基础路由：核心是 router-link （导航） + router-view（渲染） + 路由规则（path/name/component）；
• 懒加载：用 () => import(...) 替代直接导入，优化首屏加载；
• 嵌套路由：重点理解「从属关系」，父路由需提供组件和子容器，子路由路径无需写父级全路径（如 info 等价于 /admin/info）。

先手写基础路由，再尝试嵌套路由，对比一下 /admin 和 /admin1 的差异，就能快速理解入门嵌套路由。