Hash模式与History模式的区别

Hash模式与History模式的区别

1.两者都是前端路由,通过路径变化改变页面呈现内容Hash模式是基于锚点和onhashchange事件,前端锚点可以通过HTML中的元素和链接href属性实现。当路径发生变化时,根据路径决定页面渲染内容。Hash模式中#后面的数据表示路由配置
History模式是基于HTML5中的History API,主要用到pushState()方法和
replaceState()方法。pushState()方法不会向服务端发送请求,只会改变url地址并且将地址记录到历史记录中。
2.History模式下,url路径是一个普通的地址:https://www.teambition.com/project。对于单页面应用,服务器端只保存了首页的html资源,如果服务器没有相应的配置,以这样的地址去访问服务器,是找不到资源的;
所以服务器需要进行相应的配置来支持History模式,当服务器找不到所请求的资源时,将首页静态文件返回给客户端,客户端再根据当前路由地址解析页面,实现页面跳转。
对于node服务器,需要配置history中间件对于nginx服务器,需要修改nginx.conf配置文件,在location
/中增加一行代码:try_files $uri $uri/ /index.html;
意思是试着去加载所请求的路径在服务器上对应的资源,如果找不到,就以地址为文件夹,往下找index.html;如果还找不到,就返回网站中的根index.html文件。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值