vue tab页面缓存处理

vue tab页面缓存处理

问题：使用vant 框架。底部导航切换，tab页面缓存

解决：
1.index 页面 xml 设置

<keep-alive>
 <router-view v-if="$route.meta.keepAlive" style="margin-bottom: 50px"/>
 </keep-alive>
<router-view v-if="!$route.meta.keepAlive" style=" margin-bottom: 50px"/>

注意：style=" margin-bottom: 50px" 设置是为了底部数据不被导航按钮遮住，导航栏默认有高度

2.路由中设置 route.js

{
        path: '/',
        component: () => import('@/views/index'),
        redirect: '/home',
        meta: {
            title: '首页',
            keepAlive: true
        },
        children: [
            {
                path: '/home',
                name: 'Home',
                component: () => import('@/views/home/index'),
                meta: {title: '首页', keepAlive: true}
            },
            {
                path: '/mine',
                name: 'Mine',
                component: () => import('@/views/mine/index'),
                meta: {title: '个人中心', keepAlive: true}
            }
        ]
    },

注意：keepAlive: true 代表页面需要缓存，切换页面只走一次 create()函数

3.其他问题
问题：如果首页是列表，切换tab 或者从列表进去详情，回到列表页 ，列表不会记录之前滑动的位置
解决：记录列表滑动的位置，离开页面后 保存到缓存，重新返回列表时，取出缓存的位置，设置列表指定到该位置。

核心代码如下：

a.首页

<!--  -->
<template>
  <div>
    <div v-for="(item,index) in lists" :key="index">
      <div style="height: 50px;color: #449908;margin: 10px;background-color: #991908;text-align: center;line-height:50px" @click="toDetail(item)">
        {{ item }}
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {

    return {
      lists: [],
      scrollValue:''

    };
  },

  methods: {
    toDetail(item){
      this.scrollValue = window.scrollY
      console.log("详情页")
      this.$router.push({path: '/detail', query: {item: item,position: this.scrollValue}})
    }
  },

  //离开当前路由
  beforeRouteLeave(to, from, next) {
    if (from.meta.keepAlive) {
      console.log("首页滑动的位置" + window.scrollY)
      this.scrollValue = window.scrollY
      localStorage.setItem('position', this.scrollValue)
    }
    next();
  },

  activated() {
    let position = localStorage.getItem('position')

    this.$nextTick(() => { //必须使用nextTick（在下次 DOM 更新循环结束之后执行延迟回调）
      if (position!==undefined){
        window.scroll(0, position)
      }

    })
  },
  created() {
    for (let i = 0; i < 50; i++) {
      this.lists.push('测试' + (i + 1))
    }
    console.log("Home===>created()")
  }

}
</script>
<style scoped>

</style>

b.详情页：

<!--  -->
<template>
  <div class=''>
    详情：{{ value }}
    滑动距离顶部位置：{{ scrollHeight }}
  </div>
</template>

<script>


export default {

  data() {

    return {
      value: '',
      scrollHeight: ''
    };
  },


  methods: {},

  created() {
    const item = this.$route.query.item;
    const position = this.$route.query.position;
    this.value = item
    this.scrollHeight = position
    console.log("列表页面传过来的值1：", item)
    console.log("列表页面传过来的值2：", position)
  },

  destroyed() {
    console.log("详情页面生命周期destroyed：")
    localStorage.setItem('position', this.scrollHeight)
  }


}
</script>
<style scoped>

</style>