首页 > 其他分享 >前端路由history路由和hash路由的区别?原理?

前端路由history路由和hash路由的区别?原理?

时间:2024-03-19 21:59:42浏览次数:20  
标签:hash URL API 哈希 浏览器 history 路由 页面

前端路由是指在单页应用程序(SPA)中通过改变 URL 路径来实现页面切换和导航的机制。在前端开发中,有两种主要的前端路由实现方式:基于 History API 的路由(history-based routing)和基于哈希(Hash)的路由(hash-based routing)。

  1. 基于 History API 的路由(history-based routing):

    • History API 是 HTML5 提供的一组用于操作浏览器历史记录的接口。它允许 JavaScript 动态地改变 URL,并添加、修改或删除历史记录条目,而无需刷新整个页面。
    • 实现原理:当使用基于 History API 的路由时,URL 的路径部分会随着用户的操作而动态改变。通过 History API 提供的方法(如 pushStatereplaceState)可以添加或修改历史记录条目,并触发相应的页面跳转。浏览器会根据这些历史记录条目,加载相应的页面内容,并保持页面状态的一致性。
    • 示例:假设使用基于 History API 的路由,当用户点击导航链接时,JavaScript 可以使用 pushState 方法将新的路径添加到浏览器的历史记录中。然后,浏览器会加载对应的页面内容,而不会刷新整个页面。这样用户就可以通过浏览器的前进和后退按钮来导航页面,同时 URL 也会相应地改变。
  2. 基于哈希的路由(hash-based routing):

    • 哈希路由是在 URL 中使用哈希符号(#)来模拟路由的一种方式。在哈希路由中,URL 的路径部分位于 # 符号之前,而 # 符号后面的部分被称为哈希片段(hash fragment)。
    • 实现原理:当使用基于哈希的路由时,URL 中的哈希片段会随着用户的操作而改变,但不会触发整个页面的刷新。JavaScript 可以通过监听浏览器的 hashchange 事件来检测 URL 的变化,并根据哈希片段的不同值加载相应的页面内容。
    • 示例:假设使用基于哈希的路由,当用户点击导航链接时,JavaScript 可以通过修改 window.location.hash 属性来改变 URL 的哈希片段。然后,JavaScript 监听 hashchange 事件,根据新的哈希片段值加载相应的页面内容。

需要注意的是,基于 History API 的路由在现代浏览器中更为常见和推荐,因为它提供了更加优雅和语义化的 URL 结构,而且不会造成页面跳转时出现闪烁的问题。而基于哈希的路由主要用于兼容老版本浏览器或在一些特殊场景下使用。

标签:hash,URL,API,哈希,浏览器,history,路由,页面
From: https://blog.csdn.net/laowang357/article/details/136856744

相关文章

  • 常见命令-history
    常见命令-historyhistory命令用于显示指定数目的指令命令,读取历史命令文件中的目录到历史命令缓冲区和将历史命令缓冲区中的目录写入命令文件。该命令单独使用时,仅显示历史命令,在命令行中,可以使用符号!执行指定序号的历史命令。例如,要执行第2个历史命令,则输入!2。历史命令......
  • linux下永久添加静态路由-不同
    linux下永久添加静态路由-不同添加路由的命令:1,routeaddrouteadd-net192.56.76.0netmask255.255.255.0deveth0#添加一条静态路由routeadddefaultgw192.168.0.1#添加默认路由routedel-net192.168.1.0/24gw192.168.0.1#删除一条路由route-n#查看路由表2,ipr......
  • Cisco简单配置路由器
    1.绘制小型局域网拓扑结构图 首先我们需要在Cisco中绘制小型局域网拓扑结构图,如图小型局域网拓扑结构图 路由器选择:1841  需要注意的地方:    1.PC0的FastEthernet0和Router0的FastEthernet0/0进行连接;      PC1的FastEthernet0和Rou......
  • 路由器
    路由器路由器:根据路由表转发数据(有表项就转发,没有表项就丢弃)路由表的形成1.直连路由路由器会自动学习自己端口上的网段2.非直连路由A、手动配置静态路由手动去配置B、动态学习ripospfensp操作命令命令作用displayiprouting-table查看路由表displayc......
  • 静态路由的基本概念
    静态路由1.单向的,需要配置往返的路径)2.缺乏灵活性静态路由命令displayiprouting-table查看路由表displaycurrent-configuration当前所有的配置displaythis接口配置undo撤销配置iproute-static目的网段子网掩码下一跳地址配置静态路由下一跳地址:(下一个接收数据的......
  • linux hadoop106 history 1000
    ls2bin/flinkrun./examples/batch/WordCount.jar-Dexecution.runtime-mode=BATCH--input/opt/module/word.txt--output/opt/module/result.txt3bin/flinkrun./examples/batch/WordCount.jar-Dexecution.runtime-mode=BATCH-yDfs.overwrite-files=......
  • Django路由层
    mysqlclient项目同名文件夹下__init__.py这个文件中添加以下两句话:(数据库8.0时,进行数据库迁移时报错为2026的解决方法)importpymysqlpymysql.install_as_MySQLdb()路由层path(路由,视图函数,别名)关于url后面加/的问题:有时候你没有加/,django也会自动帮你加......
  • 路由
    4.路由理解:一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理。前端路由:key是路径,value是组件。对SPA应用的理解(1)单页web应用(singlepagewebapplication,SPA)(2)整个应用只有一个完整的页面(3)点击页面中的导航链接不会刷新页面,只会做页面的......
  • Django 用re_path()方法正则匹配复杂路由
    app1.url.pyfromdjango.urlsimportpath,re_pathfrom.importviewsurlpatterns=[path('index',views.index,name='index'),path('test',views.test,name='test'),path('test_int/<int:id>/......
  • 【10.0】Django框架之路由层
    【零】Django的路由系统【1】什么是URL配置(URLconf)URL调度器|Django文档|Django(djangoproject.com)URL配置(URLconf)就像Django所支撑网站的目录。它的本质是URL与要为该URL调用的视图函数之间的映射表。你就是以这种方式告诉Django,对于这个URL调用这段代......