Vue returns the current location

after entering the list page, automatically request background data, then click to enter the details page, and then return, want to remember the location of the last list page, how to achieve?

currently encountered a problem:
1: which way to achieve this effect
1: when you return to the list page from the details page, the data is automatically requested every time, making it impossible to remember the location at all

Vue.js
Mar.25,2021

router.js 

// routerhistory
const appRouter = {
  mode: "history",
  routes: [
    {
      path: "/list",
      name: "list",
      component: List,
      meta: {
        keepAlive: true //
      }
    }
  ]
}

add keep-alive to the App.vue entry file 

<template>
   <div id="app">
      <keep-alive>
         <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
   </div>
</template>
< H2 > I remember that the above can be realized, if not, then add the following to try how I realized it < / H2 >

router.js main code (can also be put into main.js) 

import { getScrollTop, setScrollTop } from "@/utils/mixin";
let routerList = [];
router.beforeEach((to, from, next) => {
  //
  let position = getScrollTop();
  let currentRouterIndex = routerList.findIndex(e => {
    return e.path === from.fullPath;
  });

  if (currentRouterIndex != -1) {
    routerList[currentRouterIndex].position = position;
  } else {
    routerList.push({
      path: from.fullPath,
      position: position
    });
  }
});

router.afterEach((to, from, next) => {

  let savedPosition = routerList.find(e => {
    return e.path === to.fullPath;
  });

  if (typeof savedPosition !== "undefined") {
    Vue.nextTick(() => {
      setScrollTop(savedPosition.position);
    });
  } else {
    Vue.nextTick(() => {
      setScrollTop(0);
    });
  }
});

utils/mixin.js 

/**/
export function getScrollTop() {
  return (
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop
  );
}
/**/
export function setScrollTop(value) {
  window.scrollTo(0, value);
}

save a sessionStorage as the identifier of the location of the list page before entering the details page, and take this session when initializing the list page.

what does it mean that I can't remember the location? You can remember the location when you leave using either sessionStorage or vuex. When you come in, take this position in the requested callback, and then scroll to the corresponding location.

the solution is mainly to record the location. The above several people have made it very clear. If you use vue-router, you can put the record location in meta
1, and when the page leaves

. 
  beforeRouteLeave (to, from, next) {
    // 
    let position = document.getElementById('vux_view_box_body').scrollTop
    if (to.path === '/home') {
      from.meta.position = 0
    } else {
      from.meta.position = position
    }
    next()
  }

2. Go back to the current page and scrollTo (0, position) after $nextTick or setTimeout in mounted

read the article that it should be OK to use keep-alive, but I haven't used it either.

Previous: Npm query version of this newspaper error This is related to npm not being able to find a file

Next: How to view projects built by vue-cli on your mobile phone

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