Single Page Application (SinglePage Application, SPA)
Means that only one application of the main page, simply load a start time , and other related resources. All content included in the main page, for each component of a functional module. Single-page application jump, is to switch related components, refresh only local resources.
js,css
Multi-page application (MultiPage Application, MPA)
Refers to multiple independent applications pages, each page must be repeated loads and other related resources. Jump multi-page applications, resources need to refresh the entire page.
js,css
Both comparison table:
| SPA | MPA | |
|---|---|---|
| structure | Many a home page + module assembly | Many full page |
| Experience | Page switching fast, good experience; the original file is loaded when times too, need to do the relevant tuning. | When the page switch slow, Suman, especially the bad experience |
| resource | Components common resources need to be loaded only once | Each page must load their own public resources |
| Applicable scene | There are high requirements for the application of experience and fluency is not conducive to SEO (SSR can help optimize SEO) | Suitable for sensitive applications SEO requirements |
| Transition animation | Vue provides transition package assembly, easy to implement | difficult to realize |
| Updates | Handover-related components, i.e., partial update | Overall HTML switching, expensive (repeat HTTP requests) |
| Routing mode | You can use hash, you can use history | Ordinary links Jump |
| Data transfer | Because a single page, using global variables like (Vuex) | cookie, localStorage such as caching scheme, URL parameters, call interface preservation |
| Associated costs | Higher pre-development costs, ongoing maintenance easier | Low pre-development costs, ongoing maintenance is more troublesome, because a function may need to change a lot of places |
Single-page application to achieve the core: front-end routing
Core front-end routes: while not changing the view request to the backend.
Here I talk about the two modes vue-router route:hash&history
1, hash mode
Principle hash pattern behind the onhashchangeevent.
-
window.addEventListener( hashchange ,function(e) { -
console.log(e.oldURL); -
console.log(e.newURL) -
},false);
By property getting and setting values.
window.location.hashhash
由于 hash 发生变化的 url 都会被浏览器记录下来，所以浏览器的前进后退可以使用，尽管浏览器没有请求服务器，但是页面状态和 url 关联起来。后来人们称其为前端路由，成为单页应用标配。
hash 模式的特点在于 hash 出现在 url 中，但是不会被包括在 HTTP 请求中，对后端没有影响，不会重新加载页面。
2、history 模式
利用了 HTML5 History Interface 中新增的
pushState()和replaceState()，它们提供了对历史记录进行修改的功能。
相关的 API:
history.pushState()
-
history.pushState(stateObj, title, url);
- state：一个与指定网址相关的状态对象，
popstate事件触发时，该对象会传入回调函数。如果不需要可填null。 - title：新页面的标题，但是所有浏览器目前都忽略这个值，可填
null。 - url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
例如：
history.pushState(new,new,new.html);
添加上面这个新记录后，浏览器地址栏立刻显示 ~/new.html，但并不会跳转到 new.html，它只是成为 history 中的最新记录。pushState 方法不会触发页面刷新，只是 history 对象变化，地址栏会变。
history.replaceState()
-
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()方法)。