Solution to the BUG that the page scrolling position does not change after vue2.0 routing switch

Below I will share with you a solution to the bug that the page scroll position does not change after the vue2.0 routing switch. It has a good reference value and I hope it will be helpful to everyone.

I encountered such a problem in a recent project. When Vue switches routing, the scrolling distance from the page to the top will remain unchanged.

<a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a>
<router-link class="db" to="/user">个人中心</router-link>

useRightNow(){
 if(判断用户存在){
  this.$router.push('/user')
 }else{
  this.$router.push("/login")
 }
}

The solution is very simple, as follows, directly monitor watch routing changes , and then assign the scroll distance scrollTop of the body to 0.

export default {
  watch:{
   '$route':function(to,from){
　　　　　　　　　　 document.body.scrollTop = 0；
     document.documentElement.scrollTop = 0; 
   }
  }
 }

Supplement: The above problems will only occur in hash mode, history mode There is a better way to deal with it on the vue official website.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Angular4 integrates the upload component of ng2-file-upload

Detailed explanation of user rights management of nodejs acl

Nodejs implements method example of parsing xml string into object

The above is the detailed content of Solution to the BUG that the page scrolling position does not change after vue2.0 routing switch. For more information, please follow other related articles on the PHP Chinese website!