单页面应用VS多页面应用的区别和适用场景

篇首语：本文由编程笔记#小编为大家整理，主要介绍了单页面应用 VS 多页面应用相关的知识，希望对你有一定的参考价值。

单页应用（SinglePage Application，SPA）

指只有一个主页面的应用，一开始只需加载一次 js,css 等相关资源。所有的内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅刷新局部资源。

多页应用（MultiPage Application，MPA）

指有多个独立的页面的应用，每个页面必须重复加载 js,css 等相关资源。多页应用跳转，需要整页资源刷新。

两者对比表格：

单页应用实现核心：前端路由

前端路由的核心：改变视图的同时不会向后端发出请求。

这里我讲讲 vue-router 路由的两种模式：hash&history

1、hash 模式

hash 模式背后的原理是 onhashchange 事件。

1. window.addEventListener( hashchange ,function(e) {

   
   



2. console.log(e.oldURL);

   
   



3. console.log(e.newURL)

   
   



4. },false);

   
   

通过 window.location.hash 属性获取和设置 hash 值。

由于 hash 发生变化的 url 都会被浏览器记录下来，所以浏览器的前进后退可以使用，尽管浏览器没有请求服务器，但是页面状态和 url 关联起来。后来人们称其为前端路由，成为单页应用标配。

hash 模式的特点在于 hash 出现在 url 中，但是不会被包括在 HTTP 请求中，对后端没有影响，不会重新加载页面。

2、history 模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()，它们提供了对历史记录进行修改的功能。

相关的 API:

history.pushState()

1. history.pushState(stateObj, title, url);

   
   

1. state：一个与指定网址相关的状态对象， popstate 事件触发时，该对象会传入回调函数。如果不需要可填 null。


2. title：新页面的标题，但是所有浏览器目前都忽略这个值，可填 null。


3. url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

例如：history.pushState(new,new,new.html);

添加上面这个新记录后，浏览器地址栏立刻显示 ~/new.html，但并不会跳转到 new.html，它只是成为 history 中的最新记录。pushState 方法不会触发页面刷新，只是 history 对象变化，地址栏会变。

history.replaceState()

1. history.replaceState(stateObj, title, url);

   
   

参数同 pushState() 一样。

调用该方法，会修改当前的 history 对象记录， history.length 的长度不会改变

history.state

当前 URL 下对应的状态信息。如果当前 URL 不是通过 pushState 或者 replaceState 产生的，那么 history.state是 null。当需要 state 和 URL 同步时可以使用 replaceState() 使之同步。

popstate 事件

同一个文档的 history 对象出现变化时，就会触发 popstate 事件。

不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发 popstate 事件，但 Firefox 则不会。

注意：调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 popstate 事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者调用 history.back()、history.forward()、history.go()方法)。

参考文章：https://mp.weixin.qq.com/s/P3IPqGvcDooLht5xKWPIOw