Vue学习笔记之细说SPA及URL的history知识

了解SPA:单页的应用程序

概念：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成。

速度：更好的用户体验，让用户在web app感受native app的速度和流畅。

路由：通过前端路由进行地址映射，在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载，也即是页面不会重新去刷新一下，重新与后台进行交互。有两种方式进行：

第一种：URL的 hash

URL的hash也就是锚点(#)，本质上是改变window.location的href属性，所以我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新动作：

第二种：HTML5的history模式，pushState

PS：push在栈（先进后出的规则）里面用得很多，pushState是把参数压入到一个栈里面（栈底：home|about|hao|demo 栈顶），然后URL里面永远是显示栈顶的那个参数，此时栈顶的参数是demo，所以地址里面显示的是demo这个URL：

此时，如果退回一个栈(back()函数)，则会退回到上一个参数：hao这个URL地址：

以此类推，所以pushState类似一个栈，push是入栈，back是出栈，遵循先进后出。

第三种：HTML5的history模式，replaceState

所以这个是替换的方式，不保留历史的参数。

第四种：HTML5的history模式，go，只能在栈里面使用(pushState)

当前页面是demo，这时候用history.go(-1)，则显示为hao的页面：

PS：history.go跳转到第几个页面

history.back()等价于history.go(-1)

history.forward()等价于history.go(1)

这三个接口等同于浏览器界面的前进、后退