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

目录0预备知识1创建项目2安装 Vue Router3新建页面文件4注册路由5配置导航6启动验证⚠ 注意事项 总结️整体流程一览按顺序完成以下 6 步就能在浏览器里看到你的路由页面Step 0 预备知识→Step 1 创建项目→Step 2⚙️ 安装路由→Step 3 新建文件→Step 4 注册路由→Step 5 配置导航→Step 6 启动验证0预备知识开始之前确认你已经安装了这些工具工具作用检查命令状态Node.js前端项目的运行环境必须安装node -v✅ 先装这个npm / pnpm包管理器用来安装各种依赖npm -v✅ 随 Node 自带VSCode代码编辑器直接打开即可✅ 必装Volar 插件VSCode 里识别 .vue 文件语法扩展商店搜索 Vue - Official✅ 强烈推荐没有安装 Node.js去官网nodejs.org下载 LTS 版本安装后重启 VSCode再在终端里输入node -v验证。1创建 Vite Vue 3 项目用脚手架快速生成项目骨架不要从零手写打开 VSCode按Ctrl 打开终端输入以下命令终端PowerShell / cmd# 1. 创建项目my-router-app 是项目名可以改 npm create vitelatest 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.js2安装 Vue RouterVite 默认不带路由需要手动安装并配置终端# 安装 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.jsimport { createRouter, createWebHashHistory } from vue-router const routes [ // 这里写路由规则等 Step 4 再填 ] const router createRouter({ history: createWebHashHistory(), // 使用 Hash 模式初学者用这个 routes, }) export default router然后在main.js里引入并挂载路由src/main.jsimport { 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.vuetemplate div h1 首页/h1 显示在网页上的内容 p欢迎来到首页/p /div /templatesrc/views/AboutView.vuetemplate 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.vuetemplate div !-- 导航栏永远显示不随页面切换消失 -- nav RouterLink to/首页/RouterLink 跳转根路径 RouterLink to/about关于/RouterLink 跳转/about /nav hr / !-- 路由出口当前页面的内容渲染在这里 -- RouterView / 页面内容显示在这里 /div /template这两个标签的作用标签作用类比RouterLink to/xxx导航链接点击后切换页面不会整页刷新电视遥控器的频道按钮RouterView /页面内容的占位符显示当前路由对应的组件电视屏幕不要用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 根组件含RouterLinkRouterView└── main.js 入口已挂载router网址入口http://localhost:4300/vue-router-steps#s0