我要评论前言
为了构建 spa（单页面应用）即不刷新整体页面，通过地址栏中的变化来实现单页面的切换等功能。
vue-router 用了两种模式来实现： hash 模式和 history 模式。 默认的路由模式是 hash 模式。
注：hash 模式和 history 模式都属于浏览器自身的特性， vue-router只是利用了这两个特性
来实现前端路由和页面的关联。
hash 模式和 history 模式最直观的区别就是-----hash路由带#号，history路由不带#号。
hash模式
hash 模式是开发中默认的模式， 它的 url 带着一个#， 例如： http://www.csy.com/#/vue， 它的 hash 值就是#/vue。
特点：
- 当url中的hash值发生改变时，浏览器不会向后端发送http请求；
- 页面不会重新加载
这种模式的浏览器支持度很好， 低版本的 ie 浏览器也支持这种模式。
hash模式原理
通过监听hashchange事件进行页面定位，渲染不同的内容;
window.onhashchange = function(event){// 点击游览器前进后退按钮时会触发
console.log(event.oldurl,event.newurl);
let hash = location.hash.slice(1);
document.body.style.color = hash;
}使用 onhashchange()事件的好处就是， 在页面的 hash 值发生变化时，无需向后端发起请求， window 就可以监听事件的改变， 并按规则加载相应的代码。
除此之外， hash 值变化对应的 url 都会被浏览器记录下来， 这样浏览器就能实现页面的前进和后退。
虽然是没有请求后端服务器， 但是页面的 hash 值和对应的 url 关联起来了。
history模式
history 模式的 url 中没有#， 它使用的是传统的路由分发模式， 即用户在输入一个 url 时， 服务器会接收这个请求， 并解析这个url， 然后做出相应的逻辑处理。
它通过html5 history api 提供的 history.pushstate方法或者 history.replacestate 方法，监听popstate事件，需要客户端和服务端共同的支持。
pushstate() 和 replacestate() 方法， 这两个方法应用于浏览器的历史记录栈， 提供了对历史记录进行修改的功能。 只是当他们进行修改时， 虽然修改了 url， 但浏览器不会立即向后端发送请求。
切换历史状态： 包括 forward()、 back()、 go()三个方法， 对应浏览器的前进， 后退， 跳转操作
注：
- history 模式下刷新页面请求后端是时
- 如果后端没有相应的路由或资源就会出现404
此为前端配置
export default new router({
mode: 'history',
// mode: 'hash', //默认hash模式
routes
})总结
1、hash模式带#号比较丑，history模式比较优雅；
2、pushstate设置的新的url可以是与当前url同源的任意url；而hash只可修改#后面的部分，故只可设置与当前同文档的url；
3、pushstate设置的新url可以与当前url一模一样，这样也会把记录添加到栈中；而hash设置 的新值必须与原来不一样才会触发记录添加到栈中；
4、pushstate通过stateobject可以添加任意类型的数据到记录中；而hash只可添加短字符串；
5、pushstate可额外设置title属性供后续使用；
6、history 模式下刷新页面请求后端是时，如果后端没有相应的路由或资源就会出现404。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论