表格配合keepalive缓存

  项目里边的需求 页面中一个表格，通过点击表格里边的某条数据跳转页面进行编辑这条数据，编辑成功以后再返回原来的页码，分页，查询的一些东西

之前做的是把查询，分页，页码什么的都保存到本地，返回页面的时候，取出来再去通过这些信息去查询数据，但现在数据量越来越大，所以就想着返回页面时不让他再次查询数据

之前没有用keepalive缓存，是因为编辑的时候会把表格中的信息也变化，用了keepalive就直接缓存全部，这些新编辑的数据就不能及时回显，但现在因为需求，只能再考虑下了

首先，a页面->b页面（编辑页面）->a页面  思路: a到b时将表格中编辑的这条数据的所有信息都存到本地，包括是在表格的哪一行，回来页面的时候，利用这个去set整个表格，只改变表格中的这一行数据

router.js
    {
        path: '/table',
        name: 'table',
        component: () => import('@/pages/table/index'),
        meta: {
          keepAlive: true,
        },
      },

App.js

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

// a页面
 beforeRouteLeave(to, from, next) {
 // 如果是去往编辑的页面，就进行缓存
    if (to.name == 'Edit') {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
  　　//进入a页面的路由如果不是编辑页面的路由就清除缓存
      if (from.name != 'Edit' && sessionStorage.getItem('scope')) {
        sessionStorage.removeItem('scope')
      }
    })
  },
  activated() {
    if (sessionStorage.getItem('scope')) {
      let tableEdit = JSON.parse(sessionStorage.getItem('scope'))
　　　　// this.$refs.table.assetFlawTableData用这个的原因是这个表格是挂载在a页面的，只能这样获取子组件里边的数据
　　　　// 在这里取出之前编辑页面存的数据，强行刷新此表格的一行数据
      this.$set(this.$refs.table.assetFlawTableData, tableEdit.index, tableEdit.item) sessionStorage.removeItem('scope') } }

 

 // 这个是保留下这一行里边的数据 
 edit(item) {
    let scope = {
         index: item.$index,
         item: item.row
            }
    this.$router.push('/Edit?id=' + item.row.id)
    sessionStorage.setItem('scope', JSON.stringify(scope))
}

// 编辑页面  
这个方法在编辑成功的接口之后进行保存你需要的数据  
 let obj = JSON.parse(sessionStorage.getItem('scope'))
          Object.keys(obj.item).forEach(key => {
            if (this.form[key]) {
              obj.item[key] = this.form[key] 
       } 
   }) 
sessionStorage.setItem('scope', JSON.stringify(obj))