Vue中的keep-alive应用

应用：

          
1
2
3
4
5
6
          <div>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

        

VueRouter的代码

          
1
2
3
4
5
6
          {
    path: "/goodslist",
    name: "goodslist",
    component: () =>import("../views/goods/goodslist.vue"),
    meta: {  keepAlive: true },
},

        

上面这段代码用来区分使用keep-alive的页面和非使用的页面。

实际情况有时候还会需要计入滚动条的位置。 这时要用到activated,deactivated生命周期

可以在全局变量中记录一个滚动条位置scrolly_table,在跳转页面时记录一下scrolly_table。

          
1
2
3
4
5
6
7
8
            activated() {
    //进入时读取位置
    console.log('进入', scrolly_table);
    this.$refs.table_list.bodyWrapper.scrollTop = scrolly_table;
  },
  deactivated(){	//离开时记录位置
    console.log('离开')
  },