vue tab页面缓存处理

vue tab页面缓存处理

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

解决： 1.index 页面 xml 设置

注意：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.首页

  
    
      
        {{ item }}
      

    
  



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