Vue2通过keep Alive设置页面缓存

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

 //App.vue

  <keep-alive :include="$store.state.cachedRouteNames">
     <router-view :key="$route.query.id"></router-view>
  </keep-alive>

      //router.js
  {
  path: '/home',
  name: 'home',
  meta: {
    title: '我需要缓存页面',
    keepAlive: true, //页面需要缓存
  },
    component: () =>import('@/views/home/index.vue')
  },
  {
  path: '/goHome',
  name: 'goHome',
  meta: {
    title: '删除缓存',
    deleteCachedName: 'home', //删除home页面需要缓存
  },
    component: () =>import('@/views/goHome/goHome.vue')
  }

      //state.js

  const state = {
    cachedRouteNames: [], //缓存页面路由
    cachedRouteScroll:null //缓存页面滚动条位置
  };

export default state

  //mutations.js
  const mutations = {
  /\*

  - 设置缓存
  - 添加缓存，需要配置在组件里添加 name 以及路由里写上对应组件的 name (name 格式 xx-xx (父组件 name-当前 name) 用"-"区分开来)
  - 删除缓存，需要配置（以缓从组件）上一个组件里添加"deleteCachedName:删除的组件 name" (例如 A ——> B 删除以缓存的组件 B，即在 A 的路由 meta 里添加 deleteCachedName:B)
    _/
  SetcachedRouteNames(state,{ action, route }) {
  const methods= {
    'add': () => {
    //添加缓存
    state.cachedRouteNames.push(route)
    state.cachedRouteNames=Array.from(new Set(state.cachedRouteNames)) //删除缓存重复数据 name
  },
  'delete': () => {
  //删除缓存
    state.cachedRouteNames.splice(state.cachedRouteNames.findIndex((e) => { return e === route}),1)
    }
  }
    methods[action]()
  },
    /_
    *设置缓存滚动条 set 记录滚动条位置，to 滚动到记录位置。set 和 to 调用方法是一样的
    *to 一般用在页面初始化 DOM 已加载完进行调用 this.$store.commit('SetcachedRouteScroll', { action: 'to', name: '' })
  *set一般用在页面离开进行调用 this.$store.commit('SetcachedRouteScroll', { action: 'set', name: '' })

    this.$store.commit('SetcachedRouteScroll', { action: 'to', name: '滚动条模块的name或id，需要加上.或#' })
    this.$store.commit('SetcachedRouteScroll', { action: 'to', name: '.class' })
    this.$store.commit('SetcachedRouteScroll', { action: 'to', name: '#id' })
  \*/

  SetcachedRouteScroll(state,{ action, name }) {
  const methods= {
    'set': () => {
    //记录滚动条位置
    state.cachedRouteScroll= document.querySelector(name).scrollTop;
    // console.log(state.cachedRouteScroll)
  },
  'to': () => {
    //滚动到记录位置
    document.querySelector(name).scrollTop = state.cachedRouteScroll;
    // console.log(state.cachedRouteScroll)
  }
    }
      methods[action]()
    },
  };

  export default mutations

  //main.js

  /\*

  - 页面转跳之后
  - 添加缓存，需要配置在组件里添加 name 以及路由里写上对应组件的 name (name 格式 xx-xx (父组件 name-当前 name) 用"-"区分开来)
  - 删除缓存，需要配置（以缓从组件）上一个组件里添加"deleteCachedName:删除的组件 name" (例如 A ——> B 删除以缓存的组件 B，即在 A 的路由 meta 里添加 deleteCachedName:B)
    \*/
  router.afterEach((to, from, next) => {
      if (to.meta.keepAlive) {
        //页面缓存
        store.commit('SetcachedRouteNames', {
          action: 'add',
          route: to.name
        })
      }
      if (to.meta.deleteCachedName) {
      //删除缓存
        store.commit('SetcachedRouteNames', {
          action: 'delete',
          route: to.meta.deleteCachedName
        })
      }
  });

  //组件
  activated() {
  //滑动到记录滚动条的位置
    this.$store.commit('SetcachedRouteScroll', { action: 'to', name: '#pullScrollCell' })
  },
  methods: {
    //转跳页面，记录当前滚动条
    go(item) {
        this.$store.commit('SetcachedRouteScroll', { action: 'set', name: '#pullScrollCell' })
        this.$router.push({
        path: '/details',
        query: {
            id:xxx,
            }
        })
    },
  }