vue--单页⾯应⽤和多页⾯应⽤
单页⾯应⽤（SinglePage Web Application，SPA）
只有⼀张Web页⾯的应⽤，是⼀种从Web服务器加载的富客户端，单页⾯跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载⼀次，常⽤于PC端官⽹、购物等⽹站
第⼀次进⼊页⾯的时候会请求⼀个html⽂件，刷新清除⼀下。切换到其他组件，此时路径也相应变化，但是并没有新的html⽂件请求，页⾯内容也变化了。
原理：JS会感知到url的变化，通过这⼀点，可以⽤js动态的将当前页⾯的内容清除掉，然后将下⼀个页⾯的内容挂载到当前页⾯上，这个时候的路由不是后端来做了，⽽是前端来做，判断页⾯到底是显⽰哪个组件，清除不需要的，显⽰需要的组件。这种过程就是单页应⽤，每次跳转的时候不需要再请求html⽂件了。
多页⾯应⽤（MultiPage Application，MPA）
多页⾯跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常⽤于 app 或 客户端等
每⼀次页⾯跳转的时候，后台服务器都会给返回⼀个新的html⽂档，这种类型的⽹站也就是多页⽹站，也叫做多页应⽤。
具体对⽐分析：
单页⾯应⽤（SinglePage Web
Application，SPA）
多页⾯应⽤（MultiPage Application，MPA）
组成⼀个外壳页⾯和多个页⾯⽚段组成多个完整页⾯构成
资源共⽤
如何做网页(css,js)
共⽤，只需在外壳部分加载不共⽤，每个页⾯都需要加载
跳转⽅式页⾯之间的跳转是从⼀个页⾯跳转到另⼀个页⾯
页⾯⽚段之间的跳转是把⼀个页⾯⽚段删除或隐藏，加载另⼀个页⾯⽚段并显⽰出
来。这是⽚段之间的模拟跳转，并没有开壳页⾯
刷新⽅式页⾯局部刷新或更改整页刷新
url 模式a/#/pageone
a/#/pagetwo
a/pageone.html
a/pagetwo.html
url 模式
a/#/pagetwo a/pagetwo.html ⽤户体验
页⾯⽚段间的切换快，⽤户体验良好页⾯切换加载缓慢，流畅度不够，⽤户体验⽐较差转场动画容易实现（⼿机app 动效）
⽆法实现数据传递因为在⼀个页⾯内，页⾯间传递数据很容易实现(⽗⼦之
间传值，或vuex 或storage 之类)
依赖 url传参、或者cookie 、localStorage等，实现⿇烦搜索引擎优化(SEO)需要单独⽅案、实现较为困难、不利于SEO检索 可利⽤
服务器端渲染(SSR)优化
实现⽅法简易试⽤范围⾼要求的体验度、追求界⾯流畅的应⽤
适⽤于追求⾼度⽀持搜索引擎的应⽤开发成本较⾼，常需借助专业的框架
较低 ，但页⾯重复代码多维护成本相对容易相对复杂
单页⾯应⽤（SinglePage Web Application，SPA）多页⾯应⽤（MultiPage Application，MPA）多页应⽤相关问题：
为什么多页应⽤的⾸屏时间快？
⾸屏时间叫做页⾯⾸个屏幕的内容展现的时间，当我们访问页⾯的时候，服务器返回⼀个html，页⾯就会展⽰出来，这个过程只经历了⼀个HTTP请求，所以页⾯展⽰的速度⾮常快。
为什么搜索引擎优化效果好（SEO）？
搜索引擎在做⽹页排名的时候，要根据⽹页内容才能给⽹页权重，来进⾏⽹页的排名。搜索引擎是可以识别html内容的，⽽我们每个页⾯所有的内容都放在Html 中，所以这种多页应⽤，seo排名效果好。
缺点，就是切换慢
因为每次跳转都需要发出⼀个http请求，如果⽹络⽐较慢，在页⾯之间来回跳转时，就会发现明显的卡顿。
单页应⽤相关问题：
为什么页⾯切换快？
页⾯每次切换跳转时，并不需要做html ⽂件的请求，这样就节约了很多http 发送时延，我们在切换页⾯的时候速度很快。
缺点：⾸屏时间慢，SEO差
单页应⽤的⾸屏时间慢，⾸屏时需要请求⼀次html ，同时还要发送⼀次js 请求，两次请求回来了，⾸屏才会展⽰出来。相对于多页应⽤，⾸屏时间慢。
SEO效果差，因为搜索引擎只认识html ⾥的内容，不认识js 的内容，⽽单页应⽤的内容都是靠js 渲染⽣成出来的，搜索引擎不识别这部分内容，也就不会给⼀个好的排名，会导致单页应⽤做出来的⽹页在百度和⾕歌上的排名差。
有这些缺点，为什么还要使⽤Vue呢？
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论