项目-h5列表跳转详情，实现后退不刷新，修改数据则刷新的功能(记录滚动条)

最近项目遇到一个需求，要求实现从列表进入详情，详情页面点击后退，页面停留在进入详情时的列表也main，即实现后退不刷新的功能，但详情也可以改变列表数据，提交详情数据需要重新获取列表数据

首先这是一个移动端项目，使用的了两个tab来展示两个列表，一个是待评分，一个是已评分，待评分数据评分后就会变成已评分数据，所以就要实现详情页面返回，列表页面不变不刷新，提交评分数据，页面就要重新加载数据

上网搜了很多教程，大多数使用的是keep-alive来进行页面缓存，所以我也是采用的keep-alive的方法。

1、对需要缓存的页面添加meta参数

在路由的route文件夹下，这里我的routes路由配置是单独抽出来的一个文件，不抽出来的就是在router/index.js文件里面

const routes = [
  {
    
    path: '/XXX',
    name: '组件名',
    meta: {
    
      keepAlive: true
    },
    component: 页面组件名称,
  }
]

2、在router/index.js文件中添加

const router = new Router({
    
  mode: 'history',
  routes,
  scrollBehavior (to, from, savedPosition) {
    
    if (savedPosition) {
    
      return savedPosition
    } 
    if (from.meta.keepAlive) {
    
      from.meta.savedPosition = document.body.scrollTop // 此处为记录的滚动条位置
    }
    from.meta.savedPosition = document.body.scrollTop 
    return {
     x: 0, y: to.meta.savedPosition || 0 }
  }
})

3、点击返回的方法，使用back

back会使页面不刷新

this.$router.back(-1)

4、在app.js中使用keep-alive

这里使用 :key=“$route.fullPath”， 会使组件强制不复用，因为如果没有这个属性，组件就会有一个复用性，而添加这个属性就是为了在页面提交修改数据时，能够对列表数据进行重新渲染

  <div id="app">
    <keep-alive >
      <router-view v-if="$route.meta.keepAlive"  :key="$route.fullPath"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

5、需要重新渲染数据时

在详情页面提交数据时，就需要重新获取数据
这里给列表页面组件路径添加一个随机query数据，因为前面的路由的 :key=“$route.fullPath” ，点击提交数据后，通过这个push返回就能够重新加载页面了，其他时候页面会保持一个缓存状态，不会刷新。

this.$router.push({
    
    path: '/列表路径',
    query: {
     'randomID': 'id' + Math.random() },
})