前端初学者如何深度理解 如何创建一个路由页面

目录

• 0预备知识
• 1创建项目
• 2安装 Vue Router
• 3新建页面文件
• 4注册路由
• 5配置导航
• 6启动验证
• ⚠ 注意事项
• 📋 总结

🗺️

整体流程一览

按顺序完成以下 6 步，就能在浏览器里看到你的路由页面

Step 0

📚 预备知识

→

Step 1

📦 创建项目

→

Step 2

⚙️ 安装路由

→

Step 3

📄 新建文件

→

Step 4

🔗 注册路由

→

Step 5

🧭 配置导航

→

Step 6

🚀 启动验证

0

预备知识

开始之前，确认你已经安装了这些工具

💡

没有安装 Node.js？去官网nodejs.org下载 LTS 版本，安装后重启 VSCode，再在终端里输入node -v验证。

1

创建 Vite + Vue 3 项目

用脚手架快速生成项目骨架，不要从零手写

打开 VSCode，按Ctrl + `打开终端，输入以下命令：

终端（PowerShell / cmd）

# 1. 创建项目（my-router-app 是项目名，可以改） npm create vite@latest my-router-app -- --template vue # 2. 进入项目目录 cd my-router-app # 3. 安装所有依赖 npm install

⚠️

注意：创建时选 Vue + JavaScript，不要选 TypeScript！
初学者先学 JS 版本，TypeScript 等熟练后再切换。

命令执行完毕后，项目结构如下：

my-router-app/
├── src/
│ ├── App.vue ← 根组件
│ ├── main.js ← 入口文件
│ └── components/
├── index.html
├── package.json
└── vite.config.js

2

安装 Vue Router

Vite 默认不带路由，需要手动安装并配置

终端

# 安装 vue-router npm install vue-router

安装完毕后，在src/下手动创建router/index.js文件：

src/
├── router/ ← 新建这个文件夹
│ └── index.js ← 新建这个文件
├── views/ ← 新建这个文件夹
├── App.vue
└── main.js

写入router/index.js内容：

src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ // 这里写路由规则，等 Step 4 再填 ] const router = createRouter({ history: createWebHashHistory(), // 使用 Hash 模式（初学者用这个） routes, }) export default router

然后在main.js里引入并挂载路由：

src/main.js

import { createApp } from 'vue' import App from './App.vue' import router from './router/index.js' 新增这一行 createApp(App) .use(router) 挂载路由，新增 .mount('#app')

✅

.use(router) 一定要加！忘了这一行，路由不会生效，也不会报错，只是什么都不发生——这是初学者最常踩的坑之一。

3

新建页面 .vue 文件

每个路由对应一个 .vue 文件，放在 src/views/ 目录下

在src/views/目录下，右键 → 新建文件，创建以下两个文件：

src/views/HomeView.vue

<template> <div> <h1>🏠 首页</h1> 显示在网页上的内容 <p>欢迎来到首页！</p> </div> </template>

src/views/AboutView.vue

<template> <div> <h1>📖 关于我们</h1> <p>这是关于页面。</p> </div> </template>

⚠️

命名规范：页面组件文件名用大驼峰HomeView.vue，不要用homeView.vue或home-view.vue，保持统一风格，后面维护更方便。

4

在路由表里注册

告诉 Vue Router：访问哪个路径，显示哪个页面

回到src/router/index.js，填入路由规则：

src/router/index.js（完整版）

import { createRouter, createWebHashHistory } from 'vue-router' // 静态导入（写在最顶部，一启动就加载） import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', URL路径：根路径 component: HomeView 对应组件：HomeView }, { path: '/about', URL路径：/about // 动态导入（访问时才加载，推荐用法） component: () => import('../views/AboutView.vue') 懒加载 }, ] const router = createRouter({ history: createWebHashHistory(), routes, }) export default router

💡

静态导入 vs 动态导入：核心页面（首页）用静态导入；不常用的页面用() => import(...)动态导入。动态导入能让首屏加载更快。

5

在 App.vue 里配置导航

加入 RouterLink（导航链接）和 RouterView（页面显示区域）

src/App.vue

<template> <div> <!-- 导航栏：永远显示，不随页面切换消失 --> <nav> <RouterLink to="/">首页</RouterLink> 跳转根路径 <RouterLink to="/about">关于</RouterLink> 跳转/about </nav> <hr /> <!-- 路由出口：当前页面的内容渲染在这里 --> <RouterView /> 页面内容显示在这里！ </div> </template>

这两个标签的作用：

🚨

不要用<a href="/about">代替 RouterLink！
普通的<a>标签会触发浏览器整页刷新，SPA 的意义就丧失了。必须用<RouterLink>。

6

启动项目，在浏览器验证

最后一步！看看你的路由页面跑起来了吗

终端

# 启动开发服务器 npm run dev

终端里会显示：

终端输出

VITE v5.x.x ready in xxx ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose

按住Ctrl点击链接，或打开浏览器访问http://localhost:5173/

你应该在浏览器里看到：

首页 关于 ← 导航栏（来自 App.vue）

🏠 首页

欢迎来到首页！

↑ RouterView 里显示的内容（来自 HomeView.vue）

🎉

点击"关于"链接，内容切换但页面不刷新？恭喜！你的第一个路由页面成功了！

⚠️

常见注意事项

初学者最容易踩的 6 个坑，提前看能少走很多弯路

🚨

忘记 .use(router)

在main.js里创建了路由但忘了挂载，RouterLink和RouterView不会报错，但什么都不显示。

✅ 记住：createApp(App).use(router).mount('#app')

📁

路径写错

导入文件时路径用../views/HomeView.vue，../表示上一级目录。

⚠️ 常见错误：./views/...（少了一个点，在 router 目录里找不到 views）

🔤

大小写敏感

文件名HomeView.vue和导入时的import HomeView from '...HomeView.vue'大小写必须完全一致。

⚠️ 在 Windows 下不报错，但部署到 Linux 服务器会出问题。

🏷️

RouterLink 而非 <a>

导航跳转必须用<RouterLink to="/路径">，不能用普通的<a href="/路径">。

普通 <a> 会触发整页刷新，破坏 SPA 体验。

🖥️

RouterView 必须放在 App.vue

没有<RouterView />，路由页面内容没有地方显示。检查App.vue的<template>里有没有这个标签。

🔄

修改后保存才生效

修改router/index.js后要按Ctrl + S保存，Vite 会自动热更新。如果没更新，试试刷新浏览器或重启npm run dev。

📋

步骤总结

按这个清单，每次添加新路由页面只需 5 分钟

1

在 src/views/ 下新建 XxxView.vue 文件在<template>里写好页面内容

2

在 router/index.js 的 routes 数组里添加一条规则{ path: '/xxx', component: () => import('../views/XxxView.vue') }

3

在 App.vue 里添加导航链接<RouterLink to="/xxx">页面名</RouterLink>

✓

保存所有文件，浏览器里验证点击导航链接，看页面内容是否正常切换

📦 完成上面步骤后，你的项目文件结构应该是这样：

src/
├── router/
│ └── index.js 路由配置
├── views/
│ ├── HomeView.vue 首页
│ └── AboutView.vue 关于页
├── App.vue 根组件（含RouterLink+RouterView）
└── main.js 入口（已挂载router）
网址入口：http://localhost:4300/vue-router-steps#s0