HashRouter 和 HistoryRouter

vue-router是vue官方提供的路由管理器,让构建单页面更容易,vue默认hash模式,还有另一种history模式

原理:
hash路由:核心就是依靠hashchange()事件在window监听hash的变化,当#后的hash值变化时,浏览器不会向服务器发送请求,因此就不会刷新页面

通过hashchange()事件来实现切换页面的操作

history路由:主要使用pushState()和replaceState()结合window.popState事件(监听浏览器前进后退)实现的,pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改

区别:

1. hash模式较丑，history模式较优雅
2. pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
3. pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
4. pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
5. pushState可额外设置title属性供后续使用
6. hash兼容IE8以上，history兼容IE10以上
7. history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误