vue——Vue 单页应用与多页应用的区别

233 阅读2分钟

一、Vue单页面应用和多页面应用的区别

1.概念:

  • SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源。
  • MPA多页面应用 (MultiPage Application),指有多个独立页面的应用,每个页面必须重复加载js、css等相关资源。多页应用跳转,需要整页资源刷新。

2.区别:

image.png

二、总结

1.概念:

SPA:只有一个主页面,开始只需加载一次js,css,等相关资源,功能模块组件化。跳转时组件之间切换,局部刷新。 MPA:多个独立页面应用,页面需要重复加载js,css相关资源。跳转时整个页面跳转和资源更新。

2.区别:

SPA:

优点: 页面切换快公用资源只需加载一次路由模式hashhistory两种;数据传递全局VUEX;后期维护容易;

缺点: 初次加载文件过多,需要调优;不利于SEO(搜索引擎优化);前期开发成本高;

适用: 适用于追求体验度和流畅度的公司,局部切换更新;

MPA:

数据的传递使用cookie\localstorge等缓存方案,URL参数、调用接口保存;

优点前提开发成本低

缺点多个页面;页面切换慢;页面直接需要重复加载公用资源过渡动画很难实现;内容更新需要重复http请求html整体切换费钱;普通的链接跳转;后期维护成本高;

适用: 适用于SEO(搜索引擎优化)较高的应用