关于前后端分离后的路由控制问题

Posted 2020-09-02 云遮夏靥

路由控制在多数框架中均有专门的方法，比如ng和node。但是只会使用是不可以的，虽然我连使用都不会。研究它的实现方式，才是正经道路，因为无论框架中的方式都炫酷或者实用，都是从底层开发出来了，那么底层的方法，就是需要了解研究的方法。依此，在以后的使用或者是自定义的时候才能够如臂使指。

那么前端的路由控制总归来说是有两种方法的。

第一种是H5新增的一类API，history。首先来看一下它的诸多方法。

//与浏览器后退按钮作用相同
window.history.back();

//跳转到
window.history.go(number);
number == -1 时与back作用相同

//与浏览器前进按钮作用相同
window.history.forward();

//向浏览器历史栈中添加一条历史记录
window.history.pushState(data, title, url);

//修改当前历史记录
window.history.replaceState(data, title, url);

//同页面不刷新跳转时触发事件
window.onpopstate()

这种方法支持IE9以上（不包括IE9）及其余浏览器，data数据最多可以存储640KB。并且可以根据自己需要定义url的样式，一般情况下默认使用#、#！和？作为分隔，当然也可以使用其他，甚至“/”。

 

第二种方法，window.location.hash。

这种方法支持IE7以上及其余所有浏览器，不包括IE7。它是以#作为前端路由的分隔的。

同样的，也有跳转触发事件，onhashchange

如下是兼容情况。（mark到的）

history&&history.pushState兼容如下：
 chrome true；
 Firefox true；
 IE10 true;
 IE<=9 false;  
 PS:ie<=9既然不支持这些api那就只能采用hash方案，来实现路由系统的兼容了。

hashchange兼容如下：
 IE9 true;
 IE8 true;
 IE7 false;
 ...

页面load时，onhashchange默认触发情况：
 chrome 需主动trigger才能触发
 FF 需主动trigger才能触发
 IE 需主动trigger才能触发

页面load时，onpopstate默认触发情况：
 chrome <34版本之前的默认触发 
 FF 默认不触发
 IE 默认不触发
PS：以上是我手动测试的一个大概情况，具体的兼容情况可以去这里测试（http://caniuse.com/）。

而作为IE6、7的话就要使用setIntval（）来侦听url的变化了。

 

那么作为分隔，#之后的内容是并不为ajax抓取的。

例如

//使用ajax，url=http://qq.com/index.html#444
//那么其实是ajax的请求地址是
http://qq.com/index.html

那么其实路由控制就是这样的原理而已。

如果使用h5的api的话需要和后台进行规范约定，约定哪些是前端来做路由控制，哪些由后台来做。

当然也可以两种方式结合起来，这样来做到一个兼容性。噢。不！是三种结合，万一。。。对不对。

总结如下

H5+hash方案：兼容所以浏览器，又照顾到了高级浏览器应用新特性。

纯H5方案：表示IE是谁，我不认识-_-"，这套方案应用纯H5的新特性，URL随心定制。

纯Hash方案：其实一开始我是拒绝的，可是...可是...duang...IE~~:)

那么这就是底层的实现方法了，至于ng和node等框架中如何来做路由控制我还没接触，最近的项目使用的是springMVC框架，那么路由控制全由后台来掌控，就没那么多事了。