keep-alive缓存组件

1,471 阅读1分钟

项目中遇到这样的问题: 列表页点击第几页或者一些筛选条件搜索出的列表,点击查看某一条的详情,返回还需保留原有的筛选条件。

  1. 在添加路由时在meta中加上keepAlive: true, image.png
  2. 在data中设置一个控制是否刷新的变量,在created中将该变量设为true
data(){
    return{
        isCreated: false
    }
},
created(){
    this.isCreated = true
}
  1. reset为重置条件的函数,query为加载列表的函数,在这些特定的name返回时刷新列表(带参数)
beforeRouteEnter(to, from, next) {
    next(vm => {
      if (
        from.name != "createContract" &&
        from.name != "createPerContract" &&
        !vm.isCreated
      ) {
        vm.reset();
      } else if (
        (from.name == "createContract" || from.name == "createPerContract") &&
        !vm.isCreated
      ) {
        console.log("vm.pageJson.page :>> ", vm.pageJson.page);
        vm.query(vm.pageJson.page);
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    this.isCreated = false;
    next();
  }