vue-Router的hash模式和history模式的区别

vue-Router的hash模式和history模式

hash模式

hash模式是早期的前端路由，由location.hash实现。

https://www.helloWorld.com#hashVal

location.hash就是URL井号后面的hashVal

hash路由实现的几个特性：

• URL中的hash值只是一个客户端状态，并不会随着URL发发送到服务器，所以服务器接收到的永远是hash前面的域名，返回的就是设定好的页面;

• hash值的改变可以在浏览器中留下一条历史记录，因此哈希路由可以前进回退;

• 可以通过a标签来设置href属性，用户点击这个超链接hash值就改变，或者直接通过JavaScript设置location.hash设置hash值跳转到指定的路由;

• 可以使用hashchange事件监听hash变化，对页面进行操作

history模式

history模式依赖于HTML5的History API。最主要的两个API如下：

window.history.pushState(null, null, path)
window.history.replaceState(null, null, path)

history模式路由的实现主要根据以下特性：

• pushState和replaceState两个API来操作实现URL的变化

• 使用popState监听URL的变化，从而对页面进行跳转（渲染）

• history.pushState()或history.replaceState()不会触发popstate事件，此时需要手动触发页面跳转(渲染)

history模式需要后台配置404返回首页，否则访问后台不存在的路由则会返回404