多页面应用(MPA)Multi-page Application
多页面跳转需要刷新所有资源,每个公共资源(js、css等)需选择性重新加载
页面跳转:使用window.location.href = “./index.html"进行页面间的跳转;
数据传递:可以使用path?account=“123”&password=”"路径携带数据传递的方式,或者localstorage、
cookie等存储方式
单页面应用(SPA)MPA Multi-page Application
通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js,
css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新
只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次
页面跳转:使用js中的append/remove或者show/hide的方式来进行页面内容的更换;
数据传递:可通过全局变量或者参数传递,进行相关数据交互
单页面的优点:
1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
2,前后端分离
3,页面效果会比较炫酷(比如切换页面内容时的专场动画)
单页面缺点:
1,不利于seo
2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退 功能,所以需要自己建立堆栈管理)
3,初次加载时耗时多
单页面与多页面的区别:
路由模式 单页应用: 可以使用 hash ,也可以使用 history
多页应用: 普通链接跳转 href
数据传递:单页应用 因为单页面,使用全局变量就好(Vuex)
数据传递:多页应用 cookie 、localStorage 等缓存方案,URL 参数,调用接口保存等