详解使用vue-router进行页面切换时滚动条位置与滚动监听事件 - 行业资讯

按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是…在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊…

<强>说说我的破解方法:
　　

1,在每个需要用vue-router切换的组件的安装钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题;

2,在每个组件内定义一条变量scrollWatch默认为真,在绑定滚动监听事件时加个如果判断,只有在scrollWatch为真时进行监听函数,然后在组件破坏的钩子内将变量scrollWatch设为false,这样就解决了滚动监听在别的组件内仍会运行的问题。

　　　　　　& lt; script> 　　从“jquery”进口美元; 　　出口默认{ 　　数据(){ 　　返回{ 　　scrollWatch:真　　} 　　}, 　　安装(){ 　　$(窗口).scrollTop (0); 　　美元(窗口)。(“滚动”,()=比;{ 　　如果(this.scrollWatch) {//你的代码　　} 　　} 　　})；　　}, 　　摧毁了(){ 　　这一点。scrollWatch=false; 　　} 　　} 　　& lt;/script> 　　　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
　　