The vue page switches to the scroll page to display the top example_vue.js

Below I will share with you an example of switching the vue page to the top of the scroll page display. It has a good reference value and I hope it will be helpful to everyone.

When using mint ui to write the mobile terminal to jump from 'listview' to the details page, the details page can be scrolled because it is larger than the height of the mobile phone. When clicking 'listview' to scroll the list and enter the details page, it is found that the details page is not from the top. Start displaying.

1. Goal:

When 'listview' enters the details page, the details page is displayed from the top of the page.

2. Let me first check the scrollY of the next two pages. It is different every time, and I did not find the scrollY between the listview and the details page. The rules between

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

4. Code implementation: The writing in vue is as follows. As for the updated life cycle,

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. For this problem, you can add the mask and loading when the network loads data. I added it.

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

(1) In login When .vue logs in successfully, it is stored in sessionStorage

sessionStorage.setItem('isLogin', true)

(2) Write # in Router’s index.js

##

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()
 }
})

The interceptor is completed!

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

Related articles:

Solve the problem that the DOM operation on the vue page does not take effect

nodejs implements super simple generation of QR codes Method

nodejs mongodb aggregate cascade query operation example

The above is the detailed content of The vue page switches to the scroll page to display the top example_vue.js. For more information, please follow other related articles on the PHP Chinese website!