Vue3 路由入门

核心概念

路由（Routing）是计算机网络和 Web 开发中的核心概念，用于描述将请求或信息从源地址导向目标地址的全过程。在计算机网络中，路由器依据 IP 协议完成数据包的网络节点转发，最终送达目标地址。在 Web 前端开发中，路由特指客户端路由（Client-Side Routing），是单页应用（SPA, Single Page Application）的核心技术。前端路由的核心作用：

URL 管理：监听浏览器 URL 变化，动态切换页面组件，无需刷新整个页面
状态保持：避免页面重载，保留用户交互状态，大幅提升用户体验
组件化视图切换：通过路由表建立 URL 路径与组件的映射关系，URL 变化时自动渲染对应组件

简单来说，Vue、React、Angular 等前端框架的路由系统，能让开发者实现多页面的应用体验，本质是在单个 HTML 文档中动态切换独立的 UI 组件。

创建视图组件

视图组件是单页应用的基础界面单元，我们在 Vue 3 项目中创建页面级视图组件，统一存放于 src/views 目录：

主页组件：src/views/home.vue

<template>
  <div class="home-page">
    欢迎来到主页
  </div>
</template>

<script setup lang="ts">
// 主页组件业务逻辑
</script>

<style scoped>
/* 组件局部样式 */
.home-page {
  padding: 20px;
}
</style>

关于页面组件：src/views/about.vue

<template>
  <div class="about-page">
    关于我们
  </div>
</template>

<script setup lang="ts">
// 关于页面组件业务逻辑
</script>

<style scoped>
/* 组件局部样式 */
.about-page {
  padding: 20px;
}
</style>

创建路由配置模块

Vue Router 4 中，我们独立封装路由配置文件，实现路由与业务逻辑解耦：

路由核心配置：src/router/index.ts

// 导入 Vue Router 核心 API
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';

// 1. 静态导入组件（适用于首页等高频组件）
import home from '../views/home.vue';

// 2. 路由懒加载（最佳实践，组件按需加载，优化首屏性能）
const about = () => import('../views/about.vue');

// 路由规则配置数组
const routes: Array<RouteRecordRaw> = [
  { 
    path: '/', 
    name: 'Home', // 命名路由（推荐）
    component: home 
  },
  { 
    path: '/about', 
    name: 'About',
    component: about 
  }
];

// 创建路由实例
const router = createRouter({
  // 路由模式：history / hash 二选一
  history: createWebHistory(),
  // 绑定路由规则
  routes
});

// 导出路由实例，供全局挂载
export default router;

路由挂载与应用集成

在 Vue 3 入口文件中注册路由，让整个应用支持路由功能：

项目入口文件：src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由实例
import router from './router'

const app = createApp(App)
// 注册全局插件
// 挂载路由（核心步骤）
app.use(router)
// 挂载应用到 DOM
app.mount('#app')

路由导航与视图渲染

使用 Vue Router 内置的两个核心组件，实现页面导航和视图渲染：

应用根组件：src/App.vue

<template>
  <!-- 导航栏 -->
  <nav class="nav-bar">
    <!-- 路由导航：替代 a 标签，避免页面刷新 -->
    <router-link to="/">主页</router-link>
    <router-link to="/about">关于我们</router-link>
  </nav>

  <!-- 路由视图：匹配的组件会渲染在此处 -->
  <div class="view-container">
    <router-view />
  </div>
</template>

<style scoped>
.nav-bar {
  padding: 20px;
  gap: 20px;
  display: flex;
  border-bottom: 1px solid #eee;
}
/* 路由激活自动添加的样式类（Vue Router 内置） */
.router-link-active {
  color: #409eff;
  font-weight: bold;
}
</style>

路由模式详解

Vue Router 4 提供两种路由模式，可根据项目需求自由切换，仅需修改路由配置中的 history 参数。

Hash

工作原理：
URL 中包含 # 符号，# 后的内容为哈希值，浏览器不会将其发送给服务端，路由变化仅在客户端处理。

配置方式：

import { createWebHashHistory } from 'vue-router'
history: createWebHashHistory()

优点：
兼容性极佳，无需服务端配置，浏览器前进 / 后退功能正常。
缺点：
URL 格式不美观，对 SEO 优化不友好。

History

工作原理：
基于 HTML5 History API 实现，URL 简洁无 #，与传统多页应用格式一致。