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地址的。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
暂无评论数据