Vue adds a scroll to the top effect in the page

This time I will bring you how to add a scroll to the top effect in vue on the page. What are the precautions for adding a scroll to the top effect in vue on the page? The following is a practical case, let’s take a look. take a look.

1. Goal:

2. Let me first check the scrollY of the next two pages. It is different every time, and there is no pattern between the scrollY between the listview and the details page

3. Solution: Fix the position of the scroll page at the top when entering the details page

4. Code implementation: The writing method in vue is as follows, as for updatedlife cycleinside

updated() { 
    window.scroll(0, 0); 
  }

5. The problem has been solved, but when the network is slow, you can clearly see that the process of scrolling from the bottom to the top of the page is not very beautiful. This problem can be solved by yourself when the network loads data. For masking and loading, I added

6. I am sharing how to write an interceptor for Vue to enter the main page from the login page

(1) Save sessionStorage

sessionStorage.setItem('isLogin', true)

(2) Write

router.beforeEach((to, from, next) => {//  '/'是登陆页面的路由
 if (to.path == '/') {
  sessionStorage.removeItem('isLogin');
 }
 let user = JSON.parse(sessionStorage.getItem('isLogin'));
 if (!user && to.path != '/') {
  next({ path: '/' })
 } else {
  next()
 }
})

How to use sass configuration in vue project

How to use the on-change attribute in IView

The above is the detailed content of Vue adds a scroll to the top effect in the page. For more information, please follow other related articles on the PHP Chinese website!