这篇文章上次修改于 203 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

Vue-router 存在两种模式,默认为hash模式,而我的项目里使用的也全部是hash模式,这里来看一下两种模式之间的异同

Vue为了实现SPA(单页面应用),引入了前端路由系统,用于在改变视图的同时不向后端发送请求

直观区别:hash模式的url带#号,而history中没有

hash模式

hash值的变化不会导致浏览器向服务器发送请求,且hash会触发hashchange时间,获取当前hash值,根据hash值来修改页面内容。

hash模式背后的原理是onhashchange事件。

history模式

history模式能实现url全部的改变而不是只能改变#号后面的部分

window.history.pushState(state,title,url)
// state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
// title:标题,基本没用,一般穿null
// url:设定新的历史记录的url。新的url与当前的origin必须是一样的,否则会抛出错误。
// url可以是绝对路径,也可以是相对路径。
window.history.replaceState(state,title,url)
// 与pushState基本相同,但它是修改当前历史记录,而pushState是创建新的历史记录
window.addEventListener("popstate",function(){
// 监听游览器前进后退事件,pushState与replaceState方法不会触发
    console.log(event.state)
});
history.state; //是一个属性,可得到当前页的state信息。
// 通过window.history对象来控制页面历史记录跳转
window.history.back() //后退
window.history.forward() //前进
window.history.go(1)  //前进一步,-2为后退两步,window.history.length可以查看当前历史堆栈中页面的数量

history模式的问题

在hash模式下,前端路由修改的是#中的信息,与http中的链接无关。但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或资源,就会出现404

history 在修改 url 后,虽然页面并不会刷新,但我们在手动刷新,或通过 url 直接进入应用的时候, 服务端是无法识别这个 url 的。会出现404错误,那么就需要和后端配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok啦。