Vue 2：路由、SPA、SEO 与项目优化
一、Vue Router 2.x 守卫
分类
- 全局：
beforeEach、beforeResolve、afterEach。 - 路由独享：
beforeEnter。 - 组件内：
beforeRouteEnter（无this，可用next(vm=>{})）、beforeRouteUpdate、beforeRouteLeave。
next 行为
next()：放行。next(false)：中断。next({ path })/next('/login')：重定向。
执行顺序
导航触发 → 失活组件 beforeRouteLeave → 全局 beforeEach → 重用组件 beforeRouteUpdate → beforeEnter → 解析异步组件 → beforeRouteEnter → beforeResolve → … → afterEach → DOM 更新 → beforeRouteEnter 的回调传入实例。
路由元信息 meta
权限、标题等自定义字段的常见载体。
API
- 跳转：
router.push/replace/go - 信息：
this.$route.params、query
二、路由模式
| 模式 | 原理要点 | URL | 服务端 |
|---|---|---|---|
| hash | # 后片段不变更整页请求 | 含 # | 一般无需额外配置 |
| history | history.pushState + popstate | 无 # | 需服务端回退到 index.html |
旧稿中 history/hash 两行描述曾有重复粘贴，此处按主流文档校正：history 美观但依赖服务端兜底。
三、SPA vs MPA
SPA（单页应用）
- 一个 HTML 壳，路由切换由前端渲染，无整页刷新。
- 优点：体验连贯、前后端分离、组件化。
- 缺点：首包体积、SEO、首屏时间需额外优化。
MPA（多页应用）
- 每页独立 HTML，跳转整页刷新。
- 优点：首屏可更小、SEO 友好（页面级）、隔离性强。
- 缺点：切换顿挫、公共资源重复请求风险、跨页状态传递麻烦。
四、SPA 与 SEO
手段概览：SSR（Nuxt 等）、SSG（构建期预渲染）、辅以 History 路由、动态 title/meta、结构化数据 JSON-LD。
文档示例包含 vue-meta / vue-meta@3 用法与 meta 标签片段，可按项目选用 @vueuse/head 等现代替代。
五、图片与加载优化（原 vue2 优化）
WebP
相同观感下体积通常优于传统 JPG/PNG；现代浏览器与移动端支持已较完备。
懒加载
- IntersectionObserver + 自定义指令。
- 或
vue-lazyload/vue3-lazyload（示例以 Vue 3 插件为例，Vue 2 可选用兼容版本）。
六、通用性能清单
代码层
v-if/v-show按切换频率选用。- computed / watch 各司其职。
v-for+ 稳定 key，避免滥用 index。- 销毁副作用：
beforeDestroy清理定时器、监听、$bus订阅。 - 路由/组件懒加载：
import()。 - 列表：虚拟滚动、分页。
- 交互：防抖、节流；骨架屏 / Loading。
构建层
- 生产模式压缩、Tree-shaking、splitChunks、图片压缩、按需引入组件库等。
进阶
- SSR / SSG、微前端（qiankun 等）按规模引入。
框架通用注意
- Vue 3 编译期 PatchFlag、静态提升、cacheHandler 等（对比 Vue 2 运行时路径）。
- 组件划分：避免无意义深层嵌套；状态上提；复杂页用 store / composable 收敛逻辑。
- 内存泄漏：定时器、全局事件、闭包持有 DOM 等需在销毁路径释放。
七、小结
- 路由：守卫顺序、
meta权限、history 服务端配置。 - SPA：体验与 SEO、首屏的矛盾用 SSR/SSG 与构建优化平衡。
- 性能：渲染策略 + 网络资源 + 打包拆分三位一体。
下一章：错误处理·跨域·内置组件与插件。