Vue单页应用(SPA)及其优缺点

一、什么是单页面应用和多页应用？

单页应用：只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。单页应用跳转，就是使用路由跳转切换相关组件，仅刷新局部资源。
多页应用：多个独立的页面的应用，每个页面必须重复加载js、css等相关资源，多页应用跳转，需要整页资源刷新。

二、单页应用与多页应用的区别

三、单页应用的优缺点

优点：

• 项目用户体验好、快，内容的改变不需要重新加载整个页面。
• 组件可复用
• 良好的前后端分离，分工更明确。

缺点：

• 首次渲染速度相对较慢。

四、如何实现一个单页应用？

原理：
1、监听地址栏的hash变化驱动界面变化。
2、用pushstate记录浏览器的历史，驱动界面变化。
实现方式：
一、hash模式

通过window.location.hash获取和设置hash值，由于hash发生变化的url都会被浏览器记录下来，所以浏览器的前进和后退可以使用，尽管浏览没有请求服务器，但是页面状态和url关联起来。
hash模式的hash出现在url中，不会包括在HTTP请求中，对后端没有影响，不会重新加载页面。

二、history模式

history模式是利用history.pushState、history.replaceState来完成URL跳转而无需加载页面。
history.pushState：用于新增一个历史记录。
history.replaceState：修改当前的历史记录项。