前端路由的两种模式:hash模式和 history模式

本文介绍了前端路由的两种实现方式:hash模式和history模式。hash模式利用onhashchange事件监听URL中#号后的变化,不会重新加载页面。history模式借助H5的pushState和replaceState方法改变URL,但需要服务器配合处理404情况。history模式适用于更规范的URL,而hash模式适合避免#号出现在URL中。
摘要由CSDN通过智能技术生成

前端路由实现方式

在单页面web网页中, 单纯的浏览器地址改变,网页不会重载,如单纯的hash网址改变网页不会变化,因此我们的路由主要是通过监听事件,并利用js实现动态改变网页内容,有两种实现方式:

    hash模式:监听浏览器地址hash值变化,执行相应的js切换网页
    history模式:利用history API实现url地址改变,网页内容改变

hash与history的区别
hash history
url显示 地址中永远带着#,不美观 地址干净、美观
回车刷新 可以加载到hash值对应页面 一般就是404掉了
支持版本 支持低版本浏览器和IE浏览器 HTML5新推出的API
上线部署 需要后端人员支持,解决刷新页面服务端404的问题

备注:

  • 如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传。
  • 其功能也有区别,比如我们在开发app的时候有分享页面,咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,会被标记为不合法。所以要将#号去除那么就要使用history模式。

  • 3
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值