hash和history的区别

本文深入探讨了前端路由的两种实现方式:hash模式和history模式。详细分析了这两种模式的工作原理、特点及应用场景,帮助读者理解如何在不同的需求下选择合适的路由方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

hash和history的区别

一、从用户的角度看路由需实现以下两个功能

  • 记录当前页的状态

保存或分享当前页面的URL,再次打开该URL时,网页还是保存的分享时的状态

  • 可使用浏览器的前进后退功能

(如点击后退按钮,可以使页面回到ajax更新页面之前的状态,url也回到之前的状态)

二、作为开发者,要实现这两个功能,我们需要

  • 改变url且不让浏览器向服务器发出请求;
  • 监测url的变化;
  • 截获url地址,并解析出需要的信息来匹配路由规则。

三、我们常用的hash模式和history模式实际上就是实现了上面的功能

1. hash模式

这里的hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也称作锚点,本身是用来做页面定位的,他可以使对应的id元素显示在可视区域内。
由于hash值变化不会导致浏览器向服务器发出请求,而且hash改变会触发hashchange事件,浏览器的进后退也能对其进行控制,所以人们在html5的history出现前,基本都是使用hash来实现前端路由的。他的特点在于:hash虽然出现url中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。其次,hash的而传参是基于url的,如果要传递复杂的数据,会有体积的限制

  window.location.hash='qq'//设置 url 的 hash,会在当前url后加上'#qq'

var hash = window.location.hash //'#qq'

window.addEventListener('hashchange',function(e){
  //监听hash变化,点击浏览器的前进后退会触发
   console.log(event.oldURL, event.newURL);
})
//或者使用以下方式
//window.onhashchange = function(event){
//     console.log(event.oldURL, event.newURL);
//}
2. history模式

Hash的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由。history模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。

history api可以分为两大部分,切换和修改

history切换

切换历史状态包括back、forward、go
三个方法,对应浏览器的后退,前进,跳转操作,有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转。

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

history利用了H5中 History API中新增的pushState()和replaceState()方法。

window.history.pushState(state,title,url)
//state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
//title:标题,基本没用,一般传null
//url:设定新的历史纪录的url。新的url与当前url的origin必须是一样的,否则会抛出错误。url可以时绝对路径,也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/,
//执行history.pushState(null, null, '/qq/'),则变成 https://www.baidu.com/qq/

window.history.replaceState(state,title,url)
//与pushState 基本相同,但她是修改当前历史纪录,而 pushState 是创建新的历史纪录

window.addEventListener("popstate",function(event){
 //监听浏览器前进后退事件,pushState与replaceState方法不会触发
  console.log(event.state)
})
//window.history.length可以查看当前历史堆栈中页面的数量

​ 通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。
​ 这两个方法应用于浏览器的历史纪录,在当前已有的back、forward、go 的基础之上,他们提供了对历史纪录进行修改的功能,只是当他们执行修改使,虽然改变了当前的url,但你的浏览器不会立即像后端发送请求。

总结

1、hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.abc.com因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;
2、history模式下,前端的url必须和实际后端发起请求的url一致,如http://www.abc.com/details/id。如果后端缺少对/details/id 的路由处理,将返回404错误。

<think>我们正在回答关于Vue.js路由中hash模式history模式区别的问题。根据引用内容,我们可以总结出以下几点区别: 1. **URL格式不同**:- hash模式:URL中包含一个`#`符号,路由信息位于hash部分,例如:`http://example.com/#/home`[^1][^3]。- history模式:URL是正常的,没有`#`,路由信息位于路径部分,例如:`http://example.com/home`[^3][^4]。 2. **浏览器支持**:- hash模式:兼容所有浏览器,包括老式浏览器(如IE9)[^3]。- history模式:需要浏览器支持HTML5 HistoryAPI(IE10以上)[^3][^4]。 3. **SEO优化**:-hash模式:由于hash部分不会被发送到服务器,因此搜索引擎可能不会抓取hash部分的路由信息,不利于SEO[^3]。- history模式:URL是完整的路径,可以被搜索引擎抓取,有利于SEO优化[^3]。4.**刷新页面行为**:-hash模式:刷新页面时,由于hash部分不会发送到服务器,因此服务器只需返回根页面(如index.html),然后由前端路由接管,页面不会404[^3][^4]。-history模式:刷新页面时,浏览器会向服务器请求当前URL对应的资源。如果服务器没有配置对所有路径返回同一个入口文件(如index.html),则会出现404错误。因此,使用history模式需要服务器端进行支持,配置重定向规则[^3][^4]。5.**实现原理**:- hash模式:利用`window.location.hash`的变化`hashchange`事件来监听路由变化[^4]。-history模式:利用HTML5History API(如`pushState`、`replaceState`)来改变URL,并且通过`popstate`事件来监听路由变化(注意:`pushState``replaceState`不会触发`popstate`事件,需要手动触发视图更新)[^4]。6.**设置方式**:-在Vue Router中,通过`mode`参数设置(Vue Router3.x及之前版本):```javascriptconstrouter =new VueRouter({routes,mode:'history' //或'hash'})```-在Vue Router4.x(Vue3)中,使用`createWebHashHistory`(hash模式)或`createWebHistory`(history模式):```javascriptimport{ createRouter,createWebHashHistory, createWebHistory} from'vue-router'//hash模式constrouter =createRouter({history:createWebHashHistory(),routes,})//history模式const router= createRouter({history: createWebHistory(),routes,})```7.**可读性**:-hash模式:URL中带有`#`,看起来不太美观,且`#`后面的内容在传统URL中用于页面内锚点,可能引起混淆[^3]。-history模式:URL更简洁,更符合用户对URL的认知[^3]。 **总结选择建议**: -如果需要兼容旧浏览器,使用hash模式。-如果希望URL更美观,且需要SEO优化,使用history模式(但需要服务器支持)。**注意事项**:-使用history模式时,服务器需要配置(以Nginx为例):```nginxlocation/ {try_files $uri $uri//index.html;}```这样,当请求的路径找不到对应的文件时,就会返回`index.html`,然后由前端路由处理。 **相关问题**: 1.在Vue Router中如何配置history模式?2.使用history模式时,服务器应该如何配置?3.hash模式是如何监听路由变化的? 4. history模式在VueRouter中的实现原理是什么?</think>### Vue.js 路由 Hash 模式与 History 模式的区别 #### 一、核心区别对比 | **特性** | **Hash 模式** | **History 模式** | |------------------|----------------------------------------|--------------------------------------| | **URL 格式** | `http://example.com/#/home`[^1][^3] | `http://example.com/home`[^3][^4] | | **兼容性** | 支持所有浏览器(包括 IE9)[^3][^4] | 需 HTML5 History API(IE10+)[^3] | | **SEO 支持** | 路由信息不被搜索引擎抓取[^3] | 可被搜索引擎抓取(利于 SEO)[^3] | | **刷新行为** | 刷新后路由信息保留[^3] | 刷新需服务器配合返回入口文件[^3][^4] | | **实现原理** | `window.location.hash` + `hashchange`[^4] | `history.pushState()` + `popstate`[^4] | | **服务器配置** | 无需特殊配置[^4] | 需配置重定向规则[^3][^4] | | **URL 美观度** | 带 `#` 符号,视觉不连贯[^3] | 更接近传统 URL,更简洁[^3] | #### 二、实现原理详解 1. **Hash 模式** - 通过 `window.location.hash` 改变 URL 的 hash 部分(`#` 后内容) - 监听 `hashchange` 事件实现路由跳转: ```javascript window.addEventListener('hashchange', () => { const route = window.location.hash.slice(1) // 获取 #/home }) ``` - 服务器始终收到 `http://example.com/` 请求(忽略 `#` 后内容)[^4] 2. **History 模式** - 使用 HTML5 History API: ```javascript // 添加新路由记录 history.pushState({}, '', '/home') // 替换当前路由 history.replaceState({}, '', '/profile') ``` - 监听 `popstate` 事件处理浏览器前进/后退: ```javascript window.addEventListener('popstate', (e) => { const route = window.location.pathname // 获取 /home }) ``` - 刷新页面时需服务器返回 `index.html`(否则 404)[^4] #### 三、配置方式对比 **Vue Router 3.x (Vue 2)** ```javascript const router = new VueRouter({ routes, mode: "hash" // 或 "history" }) ``` **Vue Router 4.x (Vue 3)** ```javascript import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router' // Hash 模式 createRouter({ history: createWebHashHistory() }) // History 模式 createRouter({ history: createWebHistory() }) ``` #### 四、使用场景建议 | **场景** | **推荐模式** | **原因** | |------------------------|--------------|--------------------------------------| | 兼容旧浏览器(IE9-) | Hash ✅ | 无需 Polyfill 支持[^4] | | 需要 SEO 优化 | History ✅ | 完整 URL 可被爬虫抓取[^3] | | 无服务器配置权限 | Hash ✅ | 无需服务器重定向规则[^4] | | 企业级应用(现代浏览器)| History ✅ | URL 更美观,体验更接近原生[^3] | #### 五、常见问题解决 1. **History 模式刷新 404** 需在服务器配置重定向(Nginx 示例): ```nginx location / { try_files $uri $uri/ /index.html; } ``` 2. **Hash 模式 URL 不美观** 可通过 `scrollBehavior` 隐藏锚点跳转效果: ```javascript const router = new VueRouter({ scrollBehavior() { return { x: 0, y: 0 } } }) ``` 3. **模式切换注意事项** - 切换后需清除浏览器历史记录 - 避免混合使用两种模式的路由跳转方法 > 官方文档参考:[Vue Router 路由模式](https://router.vuejs.org/guide/essentials/history-mode.html)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值