Vue3路由：初识Vue Router(1)

初识Vue Router

---

---

一、SPA的导游：路由是什么？

想象你走进一家大型商场，想要找到心仪的商品。这时候如果有个智能导航机器人，能根据你的需求直接带你去目标区域，是不是比挨个楼层瞎逛高效多了？Vue Router就是这个"导航机器人"。

在单页面应用（SPA）中，虽然整个网站只有一个HTML文件，但通过路由系统可以实现：

1. 根据URL变化加载不同组件
2. 保持页面局部更新
3. 保存浏览历史记录
4. 实现页面跳转动画

就像商场导航屏能显示不同楼层地图，Vue Router通过监听URL变化，智能匹配对应的"地图组件"。这避免了传统多页面网站反复加载的卡顿感，让用户体验如原生APP般流畅。

---

二、安装与配置：搭建导航系统

1. 安装路由器

就像给商场安装导航设备，我们先安装Vue Router：

# 在项目根目录运行（相当于采购导航设备）
npm install vue-router@4

2. 基础配置

新建src/router/index.js文件，配置基础路由：

// 导入路由创建工具（相当于导航系统工具箱）
import { createRouter, createWebHistory } from 'vue-router'

// 导入要展示的组件（相当于各个楼层平面图）
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

// 创建路由实例（组装导航设备）
const router = createRouter({
  // 选择历史记录模式（类似商场导航记录顾客路径）
  history: createWebHistory(import.meta.env.BASE_URL),
  
  // 配置路线图
  routes: [
    {
      path: '/',          // URL路径（相当于楼层编号）
      name: 'home',       // 路由名称（楼层正式名称）
      component: HomeView // 对应组件（该楼层的详细地图）
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    }
  ]
})

// 导出配置好的路由器（安装完毕，准备投入使用）
export default router

---

三、第一个路由配置：试运行导航

1. 挂载到主程序

在main.js中接入路由系统：

// 导入组装好的路由器（把导航设备搬进商场）
import router from './router'

// 创建Vue应用
const app = createApp(App)

// 安装路由（接通电源）
app.use(router)

// 挂载到页面
app.mount('#app')

2. 添加路由视图

在App.vue中添加路由出口：

<template>
  <!-- 导航菜单（商场各楼层入口标识） -->
  <nav>
    <router-link to="/">首页</router-link> | 
    <router-link to="/about">关于</router-link>
  </nav>
  
  <!-- 内容展示区（导航屏幕显示位置） -->
  <router-view/>
</template>

现在运行项目，你会看到：

• 点击导航链接时URL变化但页面不刷新
• <router-view>区域自动切换显示对应组件
• 浏览器前进/后退按钮正常工作

就像在商场中，通过导航屏幕选择"服装区"后，场景平滑切换到对应区域，而不是重新进入商场大门。

---

理解了基础配置后，我们可能会产生新的疑问：如果商场临时调整了楼层布局怎么办？这就是动态路由要解决的问题。好比遇到店铺装修时，导航系统需要实时更新路线指引。在接下来的章节中，我们将学习如何处理带参数的路由配置，让我们的导航系统具备应对复杂场景的能力。