路由的hash和history模式的区别及说明
作者:Cshaosun
前言
为了构建 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。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。