ruoyi page switching query condition retention

scene description

When the business encounters a demand, the query conditions entered after the page of the management platform is opened, the page number that has been clicked, and the data that has been queried are required to be preserved, retained when the tab menu is switched, and reset and cleared when the menu is closed.

solution

1. Use cookie, localStorage or sessionStorage

This method can solve some requirements, such as recording query conditions or page numbers, but it has defects, and the storage size is limited.

The cookie data size will not exceed 4K, and the session storage and local storage can reach 5M. It is not a good way to meet the requirements such as global search conditions.

2. Use Vue's keep-alive

keep-alives is a component cache, which is mainly used to preserve the component state or avoid re-rendering, which means that the created of the vue page is only executed once. What can this do? This can be done a lot. In this way, we can keep the query conditions or the queried data when created. When switching tabs, they will not be re-created because they are not re-rendered. However, after closing the menu and then opening the menu, it will be re-rendered and displayed. Execute created.

At this time, you only need to reset the query conditions, page numbers and query data objects when created, and then execute the query background and retain the query conditions and data at this time to meet the requirements.

This method can solve the scenario where the page uses the same component. Because when using the same component, if keep-alive is not used, no matter whether the tab menu is switched or the menu is closed and reopened, it will be re-rendered, and the steps after created and so on will be executed.

Code

1. To use keep-alive, you need to meet 2 points:

1. Routing configuration file setting keepAlive=true

//index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/bookOrder',
      name: 'BookOrder', 
        // 设置keepAlive属性
      meta: {
        keepAlive : true 
      },
      component: resolve => require(['@/views/order/BookOrder'], resolve)
    }
  ],
  mode:'history'
})

2. Mark the components that need to be cached and wrap them with <keep-alvie>

If you use ruoyi's AppMain.vue

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view v-if="!$route.meta.link" :key="key" />
      </keep-alive>
    </transition>
    <iframe-toggle />
  </section>
</template>

<script>
import iframeToggle from "./IframeToggle/index"

export default {
  name: 'AppMain',
  components: { iframeToggle },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

3. The name of the page vue file should be consistent with the name in the Router

For example, the name in Router above is BookOrder, then it must also be this in bookOrder.vue

export default {
  name: "BookOrder",
    data{}
}

Two, realize

Component MyTempPage.vue

//关键代码
data() {
.....

    // 总条数 从需要留存的数据中读取
      total: this.config.remainData.total,
      // 表格数据 从需要留存的数据中读取
      tableList: this.config.remainData.tableList,
      .....
      // 查询参数
      queryParams: this.config.queryParams,
.....

},

created() {
//清空查询条件、页码、缓存的数据
this.queryParams=this.config.queryParams= {};
      this.config.remainData = {tableList:[],total:0}
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");

//请求后台
this.getList();

},

methods: {
//请求后台
getList() {
      this.loading = true;
      if(this.config.parseQueryParams) this.config.parseQueryParams(this.queryParams);
      this.api.list(this.queryParams).then(response => {
        let list = response.rows;
        if(this.config.parseData) list.forEach(this.config.parseData)
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
        //留存数据
        this.config.remainData.tableList = response.rows;
        this.config.remainData.total = response.total;
      });
    },
},
activated() {
    //不需要记录数据的页面,重新执行查询
    if(!this.config.isRemainData) {
      //重新加载数据
      this.getList();
    }

  }

3. Effect display

Q&A

Q: Does ruoyi need to do keep-alive by herself?

A: No, ruoyi has been implemented. Where is the reflection? Pay attention to system management - menu management - edit - whether to cache

Q: I am using ruoyi. Is the menu setting to cache the selected cache? Why doesn’t actived and deactivated take effect?

A: Note that the name of the vue file on the page must be consistent with the name in the Router, and also pay attention to the code when ruoyi is making a dynamic router

So the name in the vue page also needs to be capitalized