Vue基础教程（166）Vue Router之项目中使用路由：Vue Router入门指南：让页面跳转像逛街一样简单-优快云博客

一、前言：为什么你的Vue项目需要个“导游”？

想象一下，你走进一个巨大的购物中心，想从优衣库直奔海底捞，却发现没有指示牌，只能靠蒙——这就是没有路由的Vue项目。用户点个按钮，页面直接白屏刷新，体验堪比在迷宫找厕所。

而Vue Router，就是你这个项目的专属“导游”。它让单页应用（SPA）内部跳转时，只更新部分内容，保持头部、底部等公共组件不动。用户仿佛在逛一个无限延展的空间，流畅得就像刷朋友圈——这才是现代Web应用的体验！

别被“路由”这个词吓到，它本质上就是匹配URL，显示对应组件的工具。今天，我们就用最白话的方式，从零搭建一个带路由的Vue项目，全程附可复制粘贴的代码！

二、环境准备：装上你的“导游小助手”

首先，确保你已经有个Vue项目。如果没有，用以下命令快速创建一个（需安装Node.js）：

npm create vue@latest my-router-demo
cd my-router-demo
npm install

接着，请出我们的主角Vue Router：

npm install vue-router@4

提示：Vue Router 4专为Vue 3设计，如果你还在用Vue 2，请安装vue-router@3。

三、基础路由配置：画一张项目“地图”

现在我们来创建路由配置文件。在src目录下新建router/index.js：

import { createRouter, createWebHistory } from 'vue-router'

// 1. 定义路由组件（实际项目中通常用import导入页面组件）
const Home = { template: '<div>欢迎来到首页！<router-link to="/about">关于我们</router-link></div>' }
const About = { template: '<div>这是关于页面<router-link to="/">回首页</router-link></div>' }

// 2. 定义路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// 3. 创建路由实例
const router = createRouter({
  history: createWebHistory(),