Vue check the details of B return list A, how can the height of list A be in the position you just clicked in?

list An is like this

clipboard.png

clipboard.png

B

clipboard.png

when I return from B details, the default height is 0

. 
  router.afterEach((to, from, next) => {
    window.scrollTo(0,0);
   document.title = to.name;
});

all pages click in with a height of 0, but when this page returns to the A list from B details, the height cannot be 0, and the height should be the clerk who has just entered B details. How can this be realized?

Html html5 javascript
Mar.30,2021

take a look at this document ide/advanced/scroll-behavior.html-sharp%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8" rel=" nofollow noreferrer "> scrolling behavior

save the height of session,a, call it when you come back, and scroll to the corresponding height

this problem has been solved
uses Vue's scrollBehavior
the official api is

clipboard.png
however, it doesn't work, it needs to be like this 

scrollBehavior (to, from, savedPosition) {
    console.log(savedPosition);
 if(savedPosition) {
    setTimeout(() => {
        window.scrollTo(savedPosition.x, savedPosition.y)
    }, 200)
}else {
      console.log("else")
    return { x: 0, y: 0 }
  }
}

I also use keep-alive (caching) to achieve the effect of not refreshing the data when going back and refreshing the data as you move forward. 

new VueRouter({
   mode: 'history',
    routes: [{
    path: '/foo',    
    component: (resolve) => {
        require(['views/foo'], resolve)
    },
    meta: {isKeepAlive: true}
}],
scrollBehavior (to, from, savedPosition) {
    if (savedPosition || typeof savedPosition == 'undefined') { //savePositionundefined
        //
        from.meta.isKeepAlive = typeof from.meta.isKeepAlive == 'undefined' ? undefined : false;
        to.meta.isKeepAlive = typeof to.meta.isKeepAlive == 'undefined' ? undefined : true;
        if(savedPosition) {
            return savedPosition;
        }
    } else {
        from.meta.isKeepAlive = typeof from.meta.isKeepAlive == 'undefined' ? undefined : true;
        to.meta.isKeepAlive = typeof to.meta.isKeepAlive == 'undefined' ? undefined : false;
    }
  }
 })

reference: https://codeshelper.com/q/10.

Previous: How to inherit promise, and add new methods for resolve and reject

Next: Vue tree components cannot use getCheckedNodes in for loops

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu