聊城网站建设 推广聊城博达,汉中市建设局网站,佛山房地产网站建设,个人不能建设论坛网站怎么办#x1f90d; 前端开发工程师#xff08;主业#xff09;、技术博主#xff08;副业#xff09;、已过CET6 #x1f368; 阿珊和她的猫_CSDN个人主页 #x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 #x1f35a; 蓝桥云课签约作者、已在蓝桥云… 前端开发工程师主业、技术博主副业、已过CET6 阿珊和她的猫_CSDN个人主页 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》 文章目录 一、引言介绍 hash 和 history 的背景为什么需要了解 hash 和 history 二、 hash 的基本概念三、 history 的基本概念四、 hash 和 history 的区别比较 hash 和 history 的不同之处在应用场景中的选择 一、引言
介绍 hash 和 history 的背景 Hash 和 History 是两种不同的路由模式它们的背景如下 Hash 模式 URL 中的 hash 值只是客户端的一种状态不会被发送到服务器。hash 值的改变都会在浏览器的访问历史中增加一个记录因此可以通过浏览器的前进、回退按钮控制 hash 的切换。可以通过 JavaScript 对 location.hash 进行赋值来改变 URL 中的 hash 值。可以用 hashchange 事件监听 hash 值的变化从而对页面进行跳转并渲染。 History 模式 HTML5 提供了 History API可以在不进行刷新的情况下操作浏览器的历史纪录。可以使用 popstate 事件来监听 URL 的变化从而对页面进行跳转和渲染。history.pushState()或 history.replaceState()不会触发 popstate 事件这时需要手动触发页面跳转。 总的来说Hash 模式是早期的路由实现方式而 History 模式则是 HTML5 提供的一种更现代的解决方案。
为什么需要了解 hash 和 history 在前端开发中了解 hash 和 history 是很重要的因为它们是实现前端路由的两种主要方式。 具体原因如下
构建SPA单页面应用对于 Vue 这类渐进式前端开发框架为了构建 SPA需要引入前端路由系统这也就是 Vue-Router 存在的意义。实现页面跳转浏览器提供了两种支持前端路由的方式即 hash 和 history。通过改变 URL实现页面跳转同时不会向后端发送请求。
总的来说了解 hash 和 history 对于构建高效、用户友好的前端应用程序至关重要。
二、 hash 的基本概念
在前端路由中hash指的是 URL 中的#符号后面的部分。例如https://example.com/#/about中的#/about就是一个hash。 什么是 hash 在前端路由中hash是指 URL 中#后面的部分。它可以用来在不刷新页面的情况下通过改变hash值来进行页面的导航。 hash 的特点和用途
不发送给服务器浏览器在访问带有hash的 URL 时不会将hash部分发送给服务器。这意味着服务器端无法获取或处理hash值。只在客户端生效hash的变化只在客户端生效不会导致服务器端的请求或页面刷新。简单且兼容性好hash的实现相对简单并且在大多数浏览器中都得到了很好的支持包括旧版本的浏览器。用于前端路由在单页面应用SPA中前端路由可以利用hash来进行页面的切换。通过监听hashchange事件可以根据hash的变化来加载不同的页面内容。 hash 的变化和更新机制 当用户点击链接或在浏览器中手动修改hash值时浏览器会触发hashchange事件。在hashchange事件中可以通过获取当前的hash值来进行相应的页面更新或路由处理。此外还可以通过使用 History API如 HTML5 的 History API来实现更高级的前端路由功能提供更好的用户体验。
三、 history 的基本概念
在前端路由中history指的是 History API它是 HTML5 提供的一种用于管理浏览器历史记录的接口。通过 History API可以在不刷新页面的情况下修改 URL 的hash值或使用新的 URL实现页面的导航和状态管理。
特点
不刷新页面使用 History API 进行页面导航时不会触发页面的刷新从而提供了更好的用户体验。可修改 URL可以通过修改 URL 的hash值或使用新的 URL来反映页面的状态变化。状态管理结合前端路由框架可以将页面的状态与 URL 关联起来实现基于 URL 的状态管理。
用途
实现单页面应用SPA通过使用 History API可以在单页面应用中实现页面的路由和状态管理提供流畅的用户体验。改善用户体验避免了页面刷新带来的用户体验问题如页面内容的丢失、重新加载等。与服务器端配合可以与服务器端进行配合实现服务器端渲染SSR或渐进式渲染。
变化和更新机制 History API 提供了两种方式来修改 URL
hashchange事件通过修改 URL 的hash值来触发页面的导航。当hash发生变化时浏览器会触发hashchange事件。History.pushState()和 History.replaceState()方法可以使用这两个方法来在浏览器历史记录中新增或替换条目从而修改 URL。这两种方式不会触发页面的刷新。
通过监听hashchange事件或使用 History.pushState()和 History.replaceState()方法可以在前端路由中根据 URL 的变化来加载不同的页面内容或执行相应的逻辑。同时也可以通过回退和前进按钮来浏览历史记录中的不同页面状态。
需要注意的是使用 History API 需要考虑一些兼容性问题并且在某些情况下可能需要服务器端的配合来处理 URL 的变化。
四、 hash 和 history 的区别
比较 hash 和 history 的不同之处 hash和history是前端路由中常用的两种方式它们的主要不同之处在于以下几个方面 URL 格式
hash方式使用 URL 的hash部分来表示路由状态例如https://example.com/#/about。history方式使用正常的 URL 结构来表示路由状态例如https://example.com/about。
页面刷新
hash方式的 URL 变化不会触发页面的刷新因为浏览器认为hash部分是属于页面内部的。history方式的 URL 变化可能会触发页面的刷新除非使用了特定的技术如 History API来处理。
兼容性
hash方式在所有的浏览器中都能正常工作包括较旧的浏览器。history方式需要支持 HTML5 History API 的浏览器才能正常工作较旧的浏览器可能需要使用 polyfill 来实现兼容。
服务器端处理
hash方式的 URL 变化不会被服务器端感知因为服务器端只处理 URL 中不带hash部分的请求。history方式的 URL 变化可以被服务器端感知如果需要在服务器端进行处理可能需要在服务器端配置相应的路由处理。
总体来说hash方式更适合简单的单页面应用而history方式更适合复杂的单页面应用或需要与服务器端进行交互的应用。在选择使用哪种方式时需要根据具体的需求和项目的特点来进行考虑。
在应用场景中的选择
在应用场景中选择使用hash还是history可以考虑以下几个因素 兼容性如果应用需要支持较旧的浏览器或移动设备可能需要选择hash方式因为它在所有的浏览器中都能正常工作。 用户体验如果希望提供更好的用户体验避免页面刷新可以选择history方式。hash方式的 URL 中带有#符号可能会让用户感到困惑。 服务器端处理如果应用需要与服务器端进行交互或者需要在服务器端进行路由处理可能需要选择history方式。使用hash方式时服务器端无法感知 URL 中的hash部分。 应用复杂度如果应用比较简单只有少数页面可能选择hash方式就足够了。如果应用比较复杂有多个页面或路由状态可能需要选择history方式来更好地管理路由。 综合考虑以上因素可以根据具体的应用场景和需求来选择使用hash还是history。在实际开发中也可以先使用hash方式进行开发然后在需要时再迁移到history方式。
