VUE-ROUTER的实现原理
采用两种方式实现:hash或history
- hash: 采用的是地址栏后面加
#的方式,通过window.location.hash = ...设定hash值,通过window.onhashchange = function () {}监听hash。注意:1、hash每次设定都会覆盖前一次hash设定;2、每次设定hash值都会向浏览器存储新的历史纪录点;3、hash设定后不影响http请求,即127.0.0.1/index#wd向后端请求时#及#之后的都无效(后端收不到),一般情况'#'是作为锚点,譬如:地址栏为'..#page',那么页面默认就滚动到id="page"的位置 - history: 兼容性IE10+;采用的是HTML5的history对象,
window.history由History产生。通过history.pushstate(state,target,newurl)创建一个新的history记录点,使history.length加1;通过history.replacestate(state,target,newurl)创建一个新的history记录点,覆盖当前的history记录点,history.length不变; - 两者共同点:都可以使用
window.onpopstate = function () {}监听其改变与否