SPA: Single Page Application(单页面复应用程序)
就是只有一个Web网页(通常是index.html)的应用。vue开发的页面典型就是spa。
后台服务器通常有两种类型:静态资源服务器+api数据接口服务器。
本地vue开发默认会新起一个http://localhost:8080/#/本地静态资源服务器
浏览器向后台静态资源服务器发起请求,后天服务器只会返回一个index.html页面,它所需的js,css等会在显示时统一加载,部分页面需要时加载。
那么如何切换到部分页面呢?就是前端路由技术:只切换而不向后台静态资源服务器发起新url请求。切到不同的前端路由,就展示路由对应的组件。
![](https://img2020.cnblogs.com/blog/1569466/202009/1569466-20200923093127927-80867958.png)
前端路由核心
改变地址栏的url,但是页面不进行整体刷新(换言之:没有向后台静态资源服务器在发起新的url静态资源请求)
ajax|axios其实访问的是api数据资源服务器
hash模式
location.hash详解
https://www.cnblogs.com/Joe-and-Joan/p/10244938.html
this.$rotuer.push()方法 在源码里面最主要的是对window的hash进行了直接赋值:
window.location.hash = route.fullPath
改变hash是不会发送url后台资源请求。
本质原因是#是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。
如http://localhost:8080/#/aaa/bbb 直接上浏览器实际发出的请求是http://localhost:8080/
改变#会改变浏览器的访问历史
每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。
window.location.hash读取#值
window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。
这个历史记录可以通过window.history.back|forwrad|go()利用到
history模式 :pushState
从某种程度来说, 调用 pushState()
和 window.location = "#foo"
基本上一样, 他们都会在当前的document中创建和激活一个新的历史记录。