vue 管理后台keep-alive 查询条件保留页面不刷新

最新推荐文章于 2024-04-15 17:49:40 发布

楚叫兽

最新推荐文章于 2024-04-15 17:49:40 发布

阅读量847

点赞数 3

分类专栏： keep-alive vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_51755206/article/details/115161489

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

keep-alive

1 篇文章 0 订阅

订阅专栏

APP.vue页面

<template>
    <div class="">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
   created () {
    }
}
</script>

<style scoped>

</style>

如果使用element-ui 后台模板
在下图中配置，否则无效
在这里插入图片描述

路由配置

          // 列表页
          {
              path: "",
              name: "visitorManage",
              component: (resolve) =>
                require([
                  "../components/page/visitor/visitorManage.vue",
                ], resolve),

              meta: {
                title: "访客管理",
                keepAlive: true,
                isBack: true,
              },
            },
            // 编辑页
            {
              path: "/visitorManage/visitorEdit",
              component: (resolve) =>
                require([
                  "../components/page/visitor/visitorEdit.vue",
                ], resolve),
              meta: { title: "访客信息" },
              name: "visitorEdit",
            },

列表页

 beforeRouteEnter(to, from, next) {
 // 判断是否为编辑页面
    if (from.path == '/visitorManage/visitorEdit') {
      to.meta.isBack = true
    } else {
      to.meta.isBack = false
    }
    next()
  },
  activated() {
    if (!this.$route.meta.isBack) {
      // this.handleClear('queryForm') /*清空查询条件*/
      this.visitPurpose = '' // 查询条件，自行修改
      this.beVisitName = '' // 查询条件，自行修改
      this.visitName = '' // 查询条件，自行修改
      console.log('当前页面不是返回的')
    } else {
      this.$route.meta.isBack = false
      this.getData() /*列表重新加载*/
    }
  },

// 获取列表
    async getData() {
      let data = {
        visitedGlobalId: this.visitvalue, // 查询条件，自行修改
        pageNum: this.pageNum, // 查询条件，自行修改
        pageSize: this.pageSize,  // 页码
        name: this.visitName, // 查询条件，自行修改
        visitorName: this.beVisitName, // 查询条件，自行修改
        visitorPurpose: this.visitPurpose, // 查询条件，自行修改
      }
      let res = await getStaffList(data)
      if (res.code == 200) {
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        this.$message.error(res.msg)
      }
    },