多页应用多页应用多页应用每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。为什么多页应用的首屏时间快？为什么多页应用的首屏时间快？首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。为什么搜索引擎优化效果好（SEO）？
为什么搜索引擎优化效果好（SEO）？
搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。但是它也有缺点，就是切换慢但是它也有缺点，就是切换慢因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。单页应用单页应用单页应用第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。为什么页面切换快？
为什么页面切换快？
页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。缺点：首屏时间慢，SEO差缺点：首屏时间慢，SEO差单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。有这些缺点，为什么还要使用Vue呢？
有这些缺点，为什么还要使用Vue呢？Vue还提供了一些其它的技术来解决这些缺点，比如说服务器端渲染技术(我是SSR)，通过这些技术可以完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来说是非常完美的页面开发解决方案。我是SSR新的更新新的更新新的更新最近在改造公司的项目，公司的项目是单页应用，可能会改成多页应用，所以对这块又重新看了一下。在网上看到一个表格觉得总结的很到位，贴过来。我是表格出处我是表格出处






mm

多页应用模式MPA

单页应用模式SPA









应用构成

由多个完整页面构成

一个外壳页面和多个页面片段构成





跳转方式

页面之间的跳转是从一个页面跳转到另一个页面

页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有开壳页面





跳转后公共资源是否重新加载

是

否





URL模式



http://xxx/page1.html 

http://xxx/page1.html





http://xxx/shell.html#page1 

http://xxx/shell.html#page2







用户体验

页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上

页面片段间的切换快，用户体验好，包括在移动设备上





能否实现转场动画

无法实现

容易实现（手机app动效）





页面间传递数据

依赖URL、cookie或者localstorage，实现麻烦

因为在一个页面内，页面间传递数据很容易实现





搜索引擎优化（SEO）

可以直接做

需要单独方案做，有点麻烦





特别适用的范围

需要对搜索引擎友好的网站

对体验要求高的应用，特别是移动应用





搜索引擎优化（SEO）

可以直接做

需要单独方案做，有点麻烦





开发难度

低一些，框架选择容易

高一些，需要专门的框架来降低这种模式的开发难度








mm

多页应用模式MPA

单页应用模式SPA





mm

多页应用模式MPA

单页应用模式SPA

mm多页应用模式MPA单页应用模式SPA



应用构成

由多个完整页面构成

一个外壳页面和多个页面片段构成





跳转方式

页面之间的跳转是从一个页面跳转到另一个页面

页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有开壳页面





跳转后公共资源是否重新加载

是

否





URL模式



http://xxx/page1.html 

http://xxx/page1.html





http://xxx/shell.html#page1 

http://xxx/shell.html#page2







用户体验

页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上

页面片段间的切换快，用户体验好，包括在移动设备上





能否实现转场动画

无法实现

容易实现（手机app动效）





页面间传递数据

依赖URL、cookie或者localstorage，实现麻烦

因为在一个页面内，页面间传递数据很容易实现





搜索引擎优化（SEO）

可以直接做

需要单独方案做，有点麻烦





特别适用的范围

需要对搜索引擎友好的网站

对体验要求高的应用，特别是移动应用





搜索引擎优化（SEO）

可以直接做

需要单独方案做，有点麻烦





开发难度

低一些，框架选择容易

高一些，需要专门的框架来降低这种模式的开发难度





应用构成

由多个完整页面构成

一个外壳页面和多个页面片段构成

应用构成由多个完整页面构成一个外壳页面和多个页面片段构成

跳转方式

页面之间的跳转是从一个页面跳转到另一个页面

页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有开壳页面

跳转方式页面之间的跳转是从一个页面跳转到另一个页面页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有开壳页面

跳转后公共资源是否重新加载

是

否

跳转后公共资源是否重新加载是否

URL模式



http://xxx/page1.html 

http://xxx/page1.html





http://xxx/shell.html#page1 

http://xxx/shell.html#page2



URL模式

http://xxx/page1.html 

http://xxx/page1.html

http://xxx/page1.html http://xxx/page1.html

http://xxx/shell.html#page1 

http://xxx/shell.html#page2

http://xxx/shell.html#page1 http://xxx/shell.html#page2

用户体验

页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上

页面片段间的切换快，用户体验好，包括在移动设备上

用户体验页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上页面片段间的切换快，用户体验好，包括在移动设备上

能否实现转场动画

无法实现

容易实现（手机app动效）

能否实现转场动画无法实现容易实现（手机app动效）

页面间传递数据

依赖URL、cookie或者localstorage，实现麻烦

因为在一个页面内，页面间传递数据很容易实现

页面间传递数据依赖URL、cookie或者localstorage，实现麻烦因为在一个页面内，页面间传递数据很容易实现

搜索引擎优化（SEO）

可以直接做

需要单独方案做，有点麻烦

搜索引擎优化（SEO）可以直接做需要单独方案做，有点麻烦

特别适用的范围

需要对搜索引擎友好的网站

对体验要求高的应用，特别是移动应用

特别适用的范围需要对搜索引擎友好的网站对体验要求高的应用，特别是移动应用

搜索引擎优化（SEO）

可以直接做

需要单独方案做，有点麻烦

搜索引擎优化（SEO）可以直接做需要单独方案做，有点麻烦

开发难度

低一些，框架选择容易

高一些，需要专门的框架来降低这种模式的开发难度

开发难度低一些，框架选择容易高一些，需要专门的框架来降低这种模式的开发难度以上就是vue 单页应用和多页应用的优劣的详细内容，关于vue 单页应用和多页应用的资料请关注其它相关文章！