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

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

<a href="#aaa"></a>

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

 

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

解决方法如下：

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

 <a @click="changeHash(‘#aaa’)">

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