认识前端路由 VSCode 实操

基础概念什么是前端路由URL 变了页面不刷新只换掉局部内容 — 这就是前端路由的全部秘密传统多页面MPA每次点击链接都向服务器请求一个新的 HTML 文件页面完全重新加载有明显白屏闪烁。⚡单页面应用SPA只加载一次 HTML之后的跳转都由前端JavaScript控制动态替换内容体验丝滑。️路由就是地图路由表 一张地图把每个URL 路径映射到对应的Vue 组件告诉浏览器这条路走哪里。对比项传统 MPA前端路由 SPA页面跳转整页刷新✓ 不刷新路由控制服务器✓ 前端 JS用户体验有白屏✓ 流畅首屏加载✓ 较快略慢需加载JSSEO 友好✓ 天然支持需额外配置原理图解前端路由工作流程从点击到渲染5 个步骤完成一次路由跳转① 用户点击RouterLink② URL 变化页面不刷新③ Router 监听onpopstate / hashchange④ 匹配路由表path → component⑤ 渲染组件RouterViewHash 模式监听 window.onhashchangeURL 含 #History 模式推荐调用 history.pushState()URL 更干净两种模式的 URL 长什么样Hash 模式https://example.com/#/aboutHistory 模式推荐https://example.com/about核心 APIVue Router 的三个核心角色理解这三个东西路由就掌握了 80%RouterLink导航链接相当于 a 标签但不会刷新页面触发️ Router路由核心维护路由表path → component执行导航守卫管理历史记录渲染RouterView内容显示区当前路由对应的组件渲染于此RouterLink 点击 → Router 查路由表 → RouterView 渲染对应组件VSCode 实操在 VSCode 中从零搭建路由打开终端跟着步骤一步步操作1创建 Vue 项目选 Router在 VSCode 终端Ctrl 中运行PowerShell 终端# 进入你的项目目录 cd C:\Users\22121\Documents # 创建 Vue 项目 npm create vuelatest vue-router-demo⚠️ 关键选项出现Add Vue Router for SPA development?时一定选Yes其他选项可以选 No。2安装依赖并启动PowerShell 终端cd vue-router-demo npm install npm run dev浏览器打开http://localhost:5173看到默认页面说明成功 ✅3查看自动生成的项目结构VSCode 左侧资源管理器中项目结构如下vue-router-demo/├── src/│ ├── router/│ │ └── index.js ← 路由配置文件核心│ ├── views/│ │ ├── HomeView.vue ← 首页组件│ │ └── AboutView.vue ← 关于页组件│ ├── components/│ ├── App.vue ← 根组件含 RouterView│ └── main.js ← 入口注册路由└── package.json4读懂路由配置文件 src/router/index.jssrc/router/index.jsimport { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router createRouter({ // History 模式URL 更干净无 # 号 history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, component: HomeView }, // 懒加载访问 /about 时才加载组件节省性能 { path: /about, component: () import(../views/AboutView.vue) }, ], }) export default router5读懂根组件 src/App.vuesrc/App.vuetemplate nav !-- RouterLink 相当于 a但不刷新页面 -- RouterLink to/首页/RouterLink RouterLink to/about关于/RouterLink /nav !-- 当前路由匹配的组件渲染在这里 -- RouterView / /template6✍️ 动手新建第三个页面 ContactView.vue在src/views/下新建文件ContactView.vuesrc/views/ContactView.vuetemplate div h1联系我们 /h1 p邮箱lijunjieexample.com/p /div /template然后在router/index.js的 routes 数组里添加一行src/router/index.js — 新增一行{ path: /contact, component: () import(../views/ContactView.vue) },再在App.vue的 nav 里加个链接src/App.vue — 新增一行RouterLink to/contact联系/RouterLink✅ 保存后直接在浏览器点联系URL 变成/contact页面不刷新但内容切换 — 前端路由生效7 进阶动态路由URL 带参数新建src/views/UserView.vuesrc/views/UserView.vuescript setup import { useRoute } from vue-router const route useRoute() // 获取当前路由信息 /script template div h1用户页面/h1 !-- route.params.id 获取 URL 中的 :id 参数 -- p当前用户 ID{{ route.params.id }}/p /div /template在路由表加src/router/index.js// :id 是动态参数可以是任意值 { path: /user/:id, component: () import(../views/UserView.vue) }, 试一试浏览器访问http://localhost:5173/user/42页面显示 用户ID42。 改成/user/99内容也跟着变 — 这就是动态路由进阶概念导航守卫 — 跳转前的门卫在路由跳转前拦截用于登录验证、权限控制等用户点击跳转/dashboard️ 导航守卫router.beforeEach()检查是否已登录✓ 已登录允许进入渲染目标页面✗ 未登录重定向跳到 /loginsrc/router/index.js — 添加守卫// 全局前置守卫每次路由跳转前都会执行 router.beforeEach((to, from, next) { const isLoggedIn localStorage.getItem(token) // 如果目标页需要登录但未登录 → 跳到登录页 if (to.path /dashboard !isLoggedIn) { next(/login) } else { next() // 放行 } })总结知识点一览表把这张表背下来路由相关的面试题基本都能应对概念是什么代码/示例路由配置path → component 的映射表{ path: /about, component: About }RouterLink不刷新的导航链接RouterLink to/aboutRouterView组件的渲染占位符RouterView /动态路由URL 中携带参数path: /user/:iduseRoute()获取当前路由信息route.params.iduseRouter()编程式导航router.push(/home)懒加载按需加载组件提升性能() import(./About.vue)导航守卫跳转前拦截做权限检查router.beforeEach((to, from, next) {})Hash 模式URL 含 #兼容性好createWebHashHistory()History 模式URL 干净需服务器配置createWebHistory() 下一步学什么掌握基础路由后可以进一步学习嵌套路由路由套路由、路由元信息meta、命名路由、过渡动画、以及结合 Pinia 状态管理。