16｜单页面应用：如何理解和实现单页面应用开发？
杨文坚
你好，我是杨文坚。
今天，我们进入项目功能页面的开发。上一讲说过，运营搭建平台，后台核心功能是搭建功能。不过，搭建功能并不是简单的一个网页就能承载的。
因为搭建功能不是单一的功能点，而是一整个功能链路，包括：搭建的物料注册、物料列表管理、物料详情等物料管理的功能点，搭建页面的布局设计、搭建结果列表、搭建发布流程、搭建版本等搭建管理功能点，还有一些管理权限的控制功能点。最终涉及的功能链路，会是很庞大的功能点集合。
同时，每个功能点基本都是需要一个网页来承载，这就需要多个网页来覆盖整个搭建后台的功能链路。
现在问题来了，一个项目的后台功能链路，页面非常多，而且，操作一个功能链路时，要跳转多个页面，每次跳转都要重新经历 HTML 页面请求响应、JavaScript / CSS / 图片等静态资源加载、服务端接口加载，会经历比较长时间的等待。
那么，有没有方式可以减少页面跳转时页面上 HTTP 的请求，提升不同页面在跳转或者切换过程中的加载和渲染速度呢？答案是有的，我们可以把功能链路的多页面形式变成单页面形式，也就是所谓的单页面应用。
什么是单页面应用？
单页面应用，英文的专业术语是 Single-Page-Application，简称“SPA”，和“多页面应用”相对。所以，单页面应用一般要和多页面对比理解，我们来看一看。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了浏览器路由的技术原理和实际应用，重点讨论了基于URL的hash值控制和基于浏览器的history控制两种实现浏览器路由的技术方案。通过示例代码和动图演示，详细解释了这两种方案的原理和实现效果，并讨论了它们的技术差异和适用场景。此外，文章还提到了在Vue.js 3.x项目中如何利用vue-router模块实现单页面应用的常见功能场景。另外，还介绍了动态路由和嵌套路由的实现方式，并探讨了如何优雅扩展单页面应用，以及处理单页面和多页面项目共存的问题。通过本文的学习，读者可以充分了解单页面路由的技术原理，理解API背后的运行机制，以及如何开发Vue.js的单页面应用。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(3)
- 最新
- 精选
请务必优秀可以讲一下路由鉴权这些吗？这些简单的就不要讲了作者回复: 您好，本课程面向的是“1～3 年前端开发者、Vue 初级开发者”。对于单页面应用路由的原理，还是有必要进行分析讲解的。 至于“路由鉴权”这个块内容，不在“搭建页面”的核心功能范围内，所以不在本课程的设计范围中。
2023-03-24归属地：四川2
伱是风ル都到企业实战章节了，咋又科普了一篇路由的内容呢，一定要写不应该放基础篇里。作者回复: 您好，本课实战篇的定位是进入“应用开发”阶段。前端应用的学习“切入点”就是路由，然后就是页面，所以这里一开始做了前端路由原理的科普。
2023-02-13归属地：江苏
中欧校友单页面应用动态加载模块，生产环境还是需要和多页应用一样从服务端请求，浏览器渲染吗？这样单页应用的优势不是不太能体现了，是因为动态加载模块一般是局部模块，不是整体更新，体验好于多页应用吗？2023-08-02归属地：上海
收起评论