0spa和前端路由

 

 

SPA： Single Page Application（单页面复应用程序）

就是只有一个Web网页（通常是index.html）的应用。vue开发的页面典型就是spa。

后台服务器通常有两种类型：静态资源服务器+api数据接口服务器。

本地vue开发默认会新起一个http://localhost:8080/#/本地静态资源服务器

浏览器向后台静态资源服务器发起请求，后天服务器只会返回一个index.html页面，它所需的js，css等会在显示时统一加载，部分页面需要时加载。

那么如何切换到部分页面呢？就是前端路由技术：只切换而不向后台静态资源服务器发起新url请求。切到不同的前端路由，就展示路由对应的组件。

 

 

前端路由核心

改变地址栏的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中创建和激活一个新的历史记录。