vue路由模式 -hash history

路由模式

前端路由的核心，就在于 ——— 改变视图的同时不会向后端发出请求。

路由有两种模式：hash、history，默认会使用hash模式，在new VueRouter的时候配置mode值可以改变路由模式

//创建Router的实例对象
const router = new Router({
mode:"hash",
routes
})

hash模式

即地址栏url中的#符号，hash的变化不会导致浏览器向服务器发出请求，对后端完全没有影响，改变hash不会重新加载页面。而且hash改变会触发hashchange事件（hashchange只能改变url#后面的部分），最重要的一点，因为hash发生变化的url都会被浏览器记录下来，所以浏览器的前进后退都可以用

hash模式背后原理： 其实就是调用了window.onhashchange方法 hash值的切换

history模式

因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。

history 模式改变 url 的方式会导致浏览器向服务器发送请求，这不是我们想看到的，我们需要在服务器端做处理：如果匹配不任何静态资源，则应该始终返回同一个 html 页面。

history api提供了三个方法

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

history模式的原理： 本质使用H5的histroy.pushState方法来更改url

hash模式和history模式的区别

• hash模式较丑，history模式较优雅
• hash兼容IE8以上，history兼容IE10以上
• history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误