最近遇到一个需求,要求在新建打开的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地址的。

分类: vue 项目实战 标签: vue哈希定位

评论

暂无评论数据

暂无评论数据

目录