关于vue返回当前位置的问题？

Question

进入列表页之后，自动请求后台数据，然后点击进入详情页，再返回的时候，想记住上一次列表页的位置，如何实现？目前遇到了问题：1：采用哪种方式去实现这个效果1：从详情页返回列表页的时候，每次都会自动请求数据，导致根本无法记住位置

Answer 1

router.js

// router用historyconst appRouter = {  mode: "history",  routes: [
    {      path: "/list",      name: "list",      component: List,      meta: {        keepAlive: true //不刷新
      }
    }
  ]
}

App.vue入口文件添加keep-alive

<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>

Answer 2

解决方法主要是记录位置，上面几位都说的很清楚了，如果用的vue-router的话，可以放到meta中记录位置
1、页面离开时

  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、回来当前页面，在mounted中$nextTick或setTimeout后scrollTo(0, position)