单页面和多页面探究
写在前边：
近期涉及到Vue项目中单页面改多页面的需求，然后自己还是有点一知半解，为什么写博客呢？
一是为了总结涉及到的技术使用情况，更加深入的去理解，到底是怎么去改写和其中涉及到一些其他的内容。
二是帮助将来有需要的朋友，可以进行参考。
一、参考
想到单页面和多页面的区别，第一时间还是去百度借鉴。从网上看到一般是一张表格，列举了其中的区别，具体到
单页面和多页面的转换和一些其他的扩展（SEO，webpack等）还是比较少的。
二、单页面应用（SPA）
1.概念
什么是单页面应用?单页面应用的全称是 single-page application ，简称SPA，他是一种网站应用模型，他可以动态的重写当前的页面来与用户交互，不需要加载整个页面。
相对比传统的web应用，单页面做到了前后端分离，后端只负责处理数据、提供接口，页面逻辑和页面渲染后交给了前端。单页面应用意味着前端掌握了主动权，
也让前端代码更加复杂和庞大，模块化，组件化以及架构设计都变得越来越重要。
2.工作原理
在单页面应用构建时，路由起到的重要的作用，下边是vue项目中简单的路由：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/demo', name: 'Demo', component: () => import( '../views/demo') }, { path: '/copy', name: 'Copy', component: () => import( '../views/copy') } ] const router = new VueRouter({ routes }) export default routes
我们在本地访问http://localhost:8080/#/demo，当我们想进入到copy页面我们可以访问http://localhost:8080/#/copy
三、多页面应用（MPA）
1.概念： 有多个.html文件之间相互跳转的应用
本质上说多页面是从单页面应用过来的
假设
pageA pageB
pageA.html -> pageB.html
pageA中会有公共的部分，会有单页面中局部刷新的部分，就像是轮播图，自行想象。
2.从单页面应用 ->多页面应用
（1）目录结构
-views
--goodList
---mian.js //入口文件
---app.vue
---good.js //路由
---index.vue //实际操作页面
--user
---mian.js //入口文件
---app.vue
---good.js //路由
---index.vue //实际操作页面
-vue.config.js
module.exports = {
entry: {
goodList: './src/views/goodList/main.js',
user: './src/views/user/main.js',
}}
当然在实际工作中一般会给views进行拆分，也会配置webpack，将来会出一期webpack的配置
这边给大家提供一个思路，按照不同的模块拆，比如说路由，views可以专注渲染页面。
（2）运行
http://localhost:8080/user.html 注意是这种方式访问网址，跳转也是从一个.html到另一个.html
四、单页面应用和多页面应用的区别
一个老生常谈的问题
| 比较 |
多页应用模式MPA
|
单页应用模式SPA
|
|
应用构成
|
由多个完整页面构成
|
一个外壳页面和多个页面片段构成
|
|
跳转方式
|
页面之间的跳转是从一个页面跳转到另一个页面
|
页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有开壳页面
|
|
跳转后公共资源是否重新加载
|
是
|
否
|
|
URL模式
|
||
|
用户体验
|
页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上
|
页面片段间的切换快，用户体验好，包括在移动设备上
|
|
能否实现转场动画
|
无法实现
|
容易实现（手机app动效）
|
|
页面间传递数据
|
依赖URL、cookie或者localstorage，实现麻烦
|
因为在一个页面内，页面间传递数据很容易实现(这里是我补充，父子之间传值，或vuex或storage之类)
|
|
搜索引擎优化（SEO）
|
可以直接做
|
需要单独方案做，有点麻烦
|
|
特别适用的范围
|
需要对搜索引擎友好的网站
|
对体验要求高的应用，特别是移动应用
|
|
搜索引擎优化（SEO）
|
可以直接做
|
需要单独方案做，有点麻烦
|
|
开发难度
|
低一些，框架选择容易
|
高一些，需要专门的框架来降低这种模式的开发难度
|
五、总结
从单页面应用到多页面应用vue实际上的编程并没有变多少，本质上多页面一个.html对应一个入口，其中涉及到webpack,后边会出一期对webpack的配置，敬请期待
个人对SEO比较感兴趣，会去了解一下。
