Vue Router 入门

🎯 引言

学完这篇文章，你将掌握单页面应用（SPA）的基本概念，理解前端路由的作用。你还会学会如何在 Vue 2.0 项目中安装和使用 Vue Router，配置路由表，利用 <router-view> 展示不同页面，以及通过 <router-link> 实现页面跳转。简而言之，这篇文章帮你迈出制作现代前端单页面应用的第一步！

🛤️ 什么是 SPA 单页面应用

SPA，全称是 Single Page Application，即“单页面应用”。简单说，它是一种网页应用的架构方式。传统网页的加载方式是每点击一个链接，浏览器就会刷新整个页面，加载新的 HTML 文件。

而 SPA 不一样，所有的内容都加载在单个 HTML 页面里，页面的切换其实是在前端通过 JavaScript 动态完成的。比如点击导航栏的“关于我们”，页面内容会变成关于我们的信息，但浏览器并不会重新加载整个页面。

这样做的好处有：

• 用户体验更流畅，页面切换速度快，没有白屏闪烁；
• 减少服务器负担，数据通过 API 请求获取，页面结构保持稳定；
• 更灵活地控制页面状态和交互。

🌐 什么是前端路由

前端路由是实现 SPA 的核心功能。它负责监听浏览器地址栏的变化（比如 URL 变成 /home 或 /about），然后对应显示不同的页面组件，而不重新加载整个网页。

浏览器的地址栏其实可以看成“页面的地址”，前端路由会根据这个地址，决定显示哪个“页面内容”。

传统的路由是由后端服务器维护的，访问一个 URL，服务器返回对应页面。但 SPA 里，路由管理是在客户端进行的，这就是“前端路由”。

• 前端路由监听地址变化（hash 或 history 模式）
• 根据路由配置，渲染对应的组件
• 实现页面无刷新切换

🧭 Vue Router 简介

Vue Router 是 Vue.js 官方提供的路由管理库，专门用来实现单页面应用中的页面跳转和路由管理。

它专门为 Vue 2.x 设计，提供了：

• 路由配置方式简洁明了
• 支持多种路由模式（hash、history）
• 内置 <router-view> 组件用于显示匹配组件
• 提供 <router-link> 组件方便跳转链接生成
• 支持路由守卫、动态路由等高级功能

Vue Router 让管理页面导航变得非常简单，并且和 Vue 的响应式系统完美结合。

⚙️ 安装与项目中注入 Vue Router

安装 Vue Router

在 Vue 2.x 项目中，Vue Router 通常单独安装。使用 npm 或 yarn 安装：

npm install vue-router@3

注意，Vue Router 3 版本是专门为 Vue 2.x 设计的，不要装 Vue Router 4（适用于 Vue 3）。

在项目中引入并注入

创建一个 router.js 文件，配置路由实例：

import Vue from 'vue';
import VueRouter from 'vue-router';

// 安装 VueRouter 插件
Vue.use(VueRouter);

// 定义路由组件（稍后详细配置）
import Home from './components/Home.vue';
import About from './components/About.vue';

// 定义路由表
const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
];

// 创建路由实例
const router = new VueRouter({
    mode: 'hash', // 默认的 hash 模式，也可选 'history'
    routes,
});

export default router;

在 main.js 中注入路由：

import Vue from 'vue';
import App from './App.vue';
import router from './router.js';

new Vue({
    el: '#app',
    router, // 注入路由
    render: h => h(App),
});

完成后，Vue 实例就拥有了路由能力，可以自动监听 URL 变化并加载对应组件。

🗺️ 配置路由表（routes 数组）

路由表是路由的核心，定义了 URL 与组件的对应关系。

const routes = [
    {
        path: '/',
        component: Home,
    },
    {
        path: '/about',
        component: About,
    },
    {
        path: '/user/:id', // 动态路由，匹配 /user/123 等
        component: UserProfile,
    },
];

• path 是 URL 路径
• component 是对应的 Vue 组件
• 支持动态路径参数（如 :id）
• 可配置嵌套路由、路由重定向等

🔄 路由视图 <router-view> 与导航链接 <router-link>

<router-view>

这是 Vue Router 内置的占位组件，页面内容切换时，匹配的组件会渲染在这里。

在主组件 App.vue 里：

<template>
    <div id="app">
        <h1>我的 Vue SPA</h1>
        <nav>
            <router-link to="/">首页</router-link>
            <router-link to="/about">关于</router-link>
        </nav>
        <router-view></router-view>
        <!-- 渲染匹配的组件 -->
    </div>
</template>

<router-view> 就是页面的“内容区”，根据路由显示不同组件。

<router-link>

这是一个导航链接组件，替代传统的 <a> 标签。它会帮你生成带有路由跳转功能的链接。

属性 to 指定跳转路径：

<router-link to="/about">关于我们</router-link>

它会被渲染成：

<a href="#/about">关于我们</a>

且点击时不会刷新页面，而是触发路由切换。

🧾 小节总结

• 单页面应用（SPA）是只用一个 HTML 页面，通过前端路由实现页面切换的应用架构
• 前端路由负责监听浏览器地址变化，动态渲染不同组件，实现无刷新导航
• Vue Router 是 Vue 2.x 官方路由库，方便配置路由和控制页面跳转
• 通过安装 Vue Router 并注入到 Vue 实例中，可以使用路由表管理 URL 和组件映射
• <router-view> 是路由内容区域，<router-link> 是无刷新导航链接组件

❓ 知识问答（Q&A）

Q：Vue Router 使用时为什么要使用 <router-link> 而不是普通的 <a> 标签？

A：因为 <router-link> 点击时不会触发浏览器的页面刷新，而是调用 Vue Router 的路由切换方法，实现 SPA 的无刷新导航，用户体验更好。

Q：如何定义带参数的动态路由？

A：在路由配置里，路径加上冒号参数，如 /user/:id，当访问 /user/123 时，参数 id 的值是 123，可以在组件中通过 $route.params.id 获取。

🧪 小练习

练习 1 - 创建路由表配置

请在已有 Vue 2 项目中，完成以下路由配置：

• / 显示 Home 组件
• /about 显示 About 组件
• /profile/:username 显示 Profile 组件

import Home from './components/Home.vue';
import About from './components/About.vue';
import Profile from './components/Profile.vue';

const routes = [
    // 你的代码写这里
];

练习 2 - 使用 <router-link> 和 <router-view>

请完善 App.vue，实现导航栏和路由视图：

<template>
    <div id="app">
        <nav>
            <!-- 你的导航链接写这里 -->
        </nav>
        <!-- 路由视图容器 -->
    </div>
</template>

<script>
export default {
    name: 'App',
};
</script>

🎉 恭喜你已经掌握 SPA 基础、前端路由原理和 Vue Router 的安装与使用技能啦！现在你可以用 Vue Router 构建更加流畅的单页面应用了。继续加油！