你的vue-router怎么实现跳转&＃xff1f;hash 和 history

为什么vue中有这两种模式

为了构建 SPA&＃xff08;单页面应用&＃xff09;&＃xff0c;需要引入前端路由系统&＃xff0c;这也就是 Vue-Router 存在的意义。前端路由的核心&＃xff0c;就在于 —— 改变视图的同时不会向后端发出请求。为了达到这种目的&＃xff0c;浏览器当前提供了以下两种支持&＃xff1a;

hash——即地址栏 URL 中的 # 符号&＃xff08;此 hash 不是密码学里的散列运算&＃xff09;。比如这个 URL&＃xff1a;http://www.abc.com/#/hello&＃xff0c;hash 的值为 #/hello。它的特点在于&＃xff1a;hash 虽然出现在 URL 中&＃xff0c;但不会被包括在 HTTP 请求中&＃xff0c;对后端完全没有影响&＃xff0c;因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。&＃xff08;需要特定浏览器支持&＃xff09; 这两个方法应用于浏览器的历史记录栈&＃xff0c;在当前已有的 back、forward、go 的基础之上&＃xff0c;它们提供了对历史记录进行修改的功能。只是当它们执行修改时&＃xff0c;虽然改变了当前的 URL&＃xff0c;但浏览器不会立即向后端发送请求。

404错误

hash模式下&＃xff0c;仅hash符号之前的内容会被包含在请求中&＃xff0c;如http://www.abc.com&＃xff0c;因此对于后端来说&＃xff0c;即使没有做到对路由的全覆盖&＃xff0c;也不会返回404错误&＃xff1b;
history模式下&＃xff0c;前端的url必须和后端发起请求的url一致&＃xff0c;例如http://www.abc.com/boo/id&＃xff0c;如果后端缺少对book/id的路由处理&＃xff0c;就会返回404错误。

hash

hash模式的背后是onhashchange事件&＃xff0c;可以在window对象上监听这个事件&＃xff1a;

window.onhashchange &＃61; function(event){console.log(event.oldURL, event.newURL);let hash &＃61; location.hash.slice(1);document.body.style.color &＃61; hash; }

这段可以在hash改变的时候改变字体颜色。
hash发生变化的url都会被浏览器记录下来&＃xff0c;从而你会发现浏览器的前进后退都可以使用了&＃xff0c;同时点击后退时&＃xff0c;页面字体颜色也会发生变化。
这样一来虽然没有向后端发送请求&＃xff0c;但是页面状态和url关联在了一起&＃xff0c;这就是前端路由。网易云和百度网盘就是典型的使用hash的网页。

history

history包括go(),forward(),back()方法。

history.go(-2); history.go(2);//前进两次 history.back(); history.forward();

修改历史状态&＃xff0c;包括了pushState()和replaceState()两种方法&＃xff0c;这两个方法接收三个参数&＃xff0c;stateObj,title,url。

history.pushState({color:&＃39;red&＃39;}, &＃39;red&＃39;, &＃39;red&＃39;}) window.onpopstate &＃61; function(event){console.log(event.state)if(event.state && event.state.color &＃61;&＃61;&＃61; &＃39;red&＃39;){document.body.style.color &＃61; &＃39;red&＃39;;} } history.back(); history.forward();

通过pushState方法把页面状态保存在state对象中&＃xff0c;当页面的url再变回这个url时&＃xff0c;可以通过event.state取到这个state对象&＃xff0c;从而可以对页面状态进行还原&＃xff0c;主要是滚动条的位置&＃xff0c;阅读进度&＃xff0c;组建的开关等等。

history模式不怕前进不怕后退怕刷新&＃xff0c;f5。
刷新是实实在在的去请求后端了。
在hash模式下&＃xff0c;前端路由修改的是#中的信息&＃xff0c;而浏览器请求是不带他的&＃xff0c;所以没有问题。但是在history模式下你可以自由的修改path&＃xff0c;当刷新时如果没有相应的的响应或者资源&＃xff0c;会分分钟刷新一个404出来。