• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue 里面怎么手动哈希定位

最近遇到一个需求,要求在新建打开的vue项目网页中,还要定位到某个位置,这么一想就只有hash哈希值定位了。

如果要用js定位,一般是使用:

 window.location.hash = "#xxx";

但是这方法有个弊端,就是只有首次运行这段代码时才有效,第二次再使用,就毫无效果了。

所以,如果你想更稳定一点,可以使用url方法

 window.location.url = "#xxx";

虽说url是改变浏览器地址,会触发刷新,但是如果值是哈希值,那么并不会触发页面刷新,并且哈希定位也是可以重复触发的。

更新: 2021-2-12

经过实际测试发现,url方式跳转在实际在火狐浏览器中没什么效果,谷歌倒是可以,为此找到了一个万能的方法。

document.getElementById("xxx").scrollIntoView();

使用这个dom方法,可以触发元素的滚动效果,体验和hash是一样的,当然这个scrollIntoView还支持参数控制,也就是控制下滚动方式,具体自己百度把,反正hash效果直接默认就行。

于是乎:

const hash = "#xxx";
window.location.href = hash;
document.getElementById(hash.replace("#", "")).scrollIntoView();

以防万一还是用了href方法,该方法可以在地址是加上hash值,而scrollIntoView是不会修改url地址的。

0
  • 本文分类:vue 项目实战
  • 本文标签:vue哈希定位
  • 流行热度:已超过 250 人围观了本文
  • 最后更新:2021年03月12日 - 11时03分57秒
  • 发布日期:2021年03月12日 - 11时03分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码