路由模式
前端路由的核心,就在于 ——— 改变视图的同时不会向后端发出请求。
路由有两种模式: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错误