flowchart LR
N0["01 URL 与导航"]
N1["02 页面生命周期"]
N2["03 请求与缓存"]
N3["04 乐观更新"]
N4["05 页面生成"]
N5["06 框架边界"]
N0 --> N1 --> N2 --> N3 --> N4 --> N5
路由数据与渲染
从浏览器与组件学到 Vue、React、路由、状态、渲染、安全和交付
0 子目录4 文档
CHAPTER OVERVIEW · 章节概览
从 URL 和返回行为开始，再理解请求缓存和页面生成位置；框架提供组织方式，业务边界仍需要自己决定。
本章学习路线
箭头表示建议的学习顺序；先理解问题，再逐步进入实现与实践。
按顺序学习
4路由与 URL：让刷新、分享和返回都有道理搜索到第三页，把链接发给朋友，对方却看到首页空白搜索框。页面内的状态可能没丢，但它从来没有写进地址。前端路由不仅是“点菜单换组件”，也是用户恢复上下文的方式。服务端状态、缓存与乐观更新：页面里的数据什么时候算数文章标题在编辑页改好了，返回列表还是旧标题。这通常不是渲染失灵，而是列表缓存没有失效。浏览器里的文章只是服务端数据的一份副本，副本需要有更新规则。CSR、SSR、SSG 与 Hydration：页面在哪里生成打开知识库，先看到一块空壳，过一会儿正文才出现；另一个网站几乎马上就有文字，但按钮晚一点才可点。它们可能选择了不同的渲染方式。先区分“看见内容”和“可以交互”，再讨论哪种适合。Nuxt 与 Next.js：框架替你组织什么，什么仍要自己决定Vue 和 React 主要帮助组织界面。做完整网站时，还需要路由、服务端入口、初始数据、错误页面和部署约定。Nuxt 与 Next.js 把这些能力组织成框架，但它们不会自动替你完成权限和业务设计。