html 界面内跳转,点击浏览器返回键时,返回界面空白的问题解决方法

    最近在开发时,遇到一个需求,在界面内有一个tabbar,点击其中一个,需要使界面跳转到对应位置,一般能想到的办法就是采用锚 链接实现。

    大家都知道,这样写,我们在点击链接时,会伴随着url改变,一般都是locaiton.href+“/#/”+href#后面的值,这样写有一个问题就是在点击浏览器后退按钮时,界面直接出现空白,初步分析原因是浏览器在从history中取得浏览器地址后,无法找到对应的地址,在没有缓存的情况下,直接显示空白页。

 

    那么解决办法就是,在点击链接时,不要使url发生变化,这样就不会出现上述问题。

解决方法如下:

1.取消原来的通过href跳转的方式,改为使用onclick事件,你会发现再点击,location.href始终保持不变,点击浏览器后退按钮时,就不会出现界面空白的现象啦。(以下写法为vue语法,只需要根据自己的框架改为对应语法结构即可)

 

 methods:{
        changeHash(idName) {
          document.querySelector(idName).scrollIntoView(true);
        }
}

 

你可能感兴趣的:(Web知识学习)