vue---详细页点返回列表页，停留在原先位置

SunnyY
7,002 阅读1分钟

列表页面，点击进入到详情页面，在详情页面向下滑动时，滚动条变化，document.documentElement.scrollTop变化，点击返回按钮时，列表页面的document.documentElement.scrollTop自动定位到了详情页面的位置。不止H5,PC端开发中也遇到过此类问题。

页面跳转后，回到此页面时，页面不刷新

概述问题：

  1. 页面跳转后，回到此页面时，页面不刷新
  2. H5在详细页点返回，返回时列表页停留在原来的位置（多用于列表页与详情编辑页之间的跳转）

实现原理：

keep-alive与vue-router配合使用

问题一：

暂且分为1、2、3个页面。 从1进入到2，在从2进入到3，此时缓存，2不刷新； 从2返回到1时，不做缓存； 从1再次点击进入到2，在从2进入到3，此时从3返回时，带上了上次的缓存记录。 这个记录怎么清除啊？


beforeRouteEnter(to, from, next) {
    if(from.path === "/memberDetails"){//详情页面返回时
       document.documentElement.scrollTop = to.meta.scollTopPosition;
       next()
    }else{
      next()
    }
  },
  beforeRouteLeave(to, from, next) { //在离开时修改keepAlive值
    if(to.path==='/memberDetails'){//当我们进入到C时开启B的缓存
        from.meta.keepAlive = true
        from.meta.scollTopPosition =  document.documentElement.scrollTop;
        next();
    }else{
      from.meta.keepAlive = false;
      from.meta.scollTopPosition =  0
      this.$destroy()
      next(); //当我们前进的不是C时我们让B页面刷新
    }
  }

详细做法:keep-alive与vue-router配合使用

需求：

  1. 列表页打开后，从其他页面进来时不刷新数据；
  2. 详情页返回至列表页时，数据不刷新，同时浏览位置不改变；
  3. 编辑页返回列表页时，表格该行数据刷新，浏览位置不改变；

实现思路：

  1. 使用keep-alive来缓存页面；
  2. 使用路由跳转时：beforeRouteEnter和beforeRouteLeave 来保存滚动的位置；
  3. 当详情页可以编辑时，记录表格行的index以及ID，保存返回到列表页时查询数据 刷新表格行数据；

在整个页面框架中需要进行是否缓存的设置

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

在路由配置中设置页面是否缓存以及滚动条的位置（这里的滚动条不一定是body的，也有可能是表格内部的或者是某个容器的）

{
    path: 'index/query',
    component: resolve =>
        require([
            '@/components/data_center/xxx/index.vue',
        ], resolve),
    meta: {
        keepAlive: true,
        scollTopPosition: 0
    }
}

@keepAlive：是否缓存
@scollTopPosition：滚动条位置

在页面入口文件.vue中，配置beforeRouteEnter和beforeRouteLeave（在离开该页时记录scollTopPosition，当从详情页返回时，再把记录的位置赋给对应容器的滚动条）

beforeRouteEnter(to, from, next) {
    next(vm => {
          if (from.path === "xxx") {
            document.getElementById('home_scheme_query').scrollTop = to.meta.scollTopPosition;
          }
    });
},
beforeRouteLeave(to, from, next) {
    if(from.meta.keepAlive) {
&emsp;        from.meta.scollTopPosition = document.getElementById('home_scheme_query').scrollTop;
    }
    next();
}

// list.vue
created() {
  this.getList()
},
beforeRouteEnter(to, from, next) {
  if (to.name === 'productList' && from.name === 'ProductSkuM') {
    to.meta.keepAlive = true // 让列表页缓存，即不刷新
    next()
  } else {
    to.meta.keepAlive = false // 让列表页即不缓存刷新
    next()
  }
},
activated() {
  console.log('缓存') // 方便我测试看的
},

以上就是列表页跳转到详情页，页面数据缓存的一种解决方案。

从列表页中的表格内部跳转到详情页，当详情页存在编辑的能力时

  1. 跳转到详情页时记录数据在表格的哪一行（$index）以及id（数据相对简单 可记录在query中）；
  2. 详情页保存时，返回到列表页触发方法，根据id得到该行数据，然后刷新该行数据即可[vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)]；

vue的activated和deactivated生命周期

<keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive>内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时组件A的deactivated的生命周期函数会被触发；在切换回组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发了，而且A组件的文字颜色也是我们之前设置过的。

参考链接：

avatar
文章
阅读
粉丝