一、hash模式(默认)
使用URL的hash来模拟一个完整的URL,当URL发生改变时不会向服务器发起请求。# 和其后面的字符称为hash,可通过 window.location.hash 获取。当hash改变会触发(包括浏览器的前进、后退)会触发window.location.hash值的变化,从而触发hashChange事件,会创建hashHistory对象
- hashHistory.push() 将新的路由添加到浏览器历史记录栈的顶部
- hasHistory.replace() 替换到当前栈
二、history模式
去掉了#号。利用了 HTML5新增的API由pushSate和replaceSate来完成URL的跳转,无需重新加载页面也不会向服务器发起请求。若手动点击刷新按钮或在地址栏输入完整URL才会向服务器发起请求,需要后端配合将所有访问都指向 index.html,否则会导致 404 错误。在点击浏览器后退按钮或js调用forward()、back()、go()时会触发popstate事件。
- history.pushSate(object, title, url) 在浏览器历史记录栈中添加一条记录
- history.replaceSate(object, title, url) 修改History对象的当前记录
- history.state 可得到当前页的state信息
相同:都可以用作SPA单页的实现,不向服务器发起请求,动态渲染页面。
不相同:history模式访问相同的url照样会向浏览器历史记录添加一条路由,而hash不会添加。
三.abstract 路由模式(了解即可)
适用于所有JavaScript环境,例如服务器端使用Node.js。如果没有浏览器API,路由器将自动被强制进入此模式。