Use vuex to remember the page number information of the current page, so that it can be restored to the previous page when returning to the list page from the details page

Let's take a look at the effect first:

Effect text description:

1. Initially page number 1
2. Click page number 4
3. Jump to page 4
4. Click the button on the right to jump to the details page
5. On the displayed details page, click the back button on the details page
6. Back to the list page, the list page will locate the last pagination information, which is 4.

1. The work that needs to be done in vuex

1. Create a new module in the store (most vuex will be divided by modules), for example, name it: backtolist.js, the code is as follows

/*
    记住当前分页信息，以便从详情页或其他页面返回列表页时，能还原上次页码
 */
const backtolist = {
    
    
  state: {
    
    
    currentPage: 1
  },

  mutations: {
    
    
    SET_CURRENT_PAGE: (state, currentPage) => {
    
    
      state.currentPage = currentPage;
    }
  },

  actions: {
    
    
    setCurrentPage({
     
      commit }, currentPage) {
    
    
      commit("SET_CURRENT_PAGE", currentPage);
    }
  }
};
export default backtolist;

2. store/index.jsImport in backtolist:

import backtolist from "./modules/backtolist";
import getters from "./getters";
...
const store = new Vuex.Store({
    
    
  modules: {
    
    
    backtolist //返回上一级时，保留页码信息
  },
  getters
});

export default store;

3. getters.jsGet the defined currentPagevariables in

const getters = {
    
    
 ...
  currentPage: (state) => state.backtolist.currentPage,
};
export default getters;

2. Add the following code to the list page component that needs to remember page information, such as list.vue:

1. Add the following code in turn in the script script:

import {
    
     mapGetters } from "vuex";
export default {
    
    
   data() {
    
    
       return {
    
    
           listQuery: {
    
    
            page: 1,  //当前页码
            pageNum: 10, //一页有多少条
          },
          total:0 //总页数
       }
   },
  //使用计算属性同步store的currentPage变量
  computed: {
    
    
    ...mapGetters([
      // 获得翻页信息
      "currentPage"
    ])
  },
  created() {
    
    
    // 读取store里保存的分页信息
    // console.log(this.currentPage);
    this.listQuery.page = this.currentPage;
  },
    // 路由钩子函数。翻页时，记住当前页信息
  beforeRouteLeave(to, from, next) {
    
    
    // 只有跳转到指定的详情页才记录翻页信息
    if (to.name === "exportTaskManageList") {
    
    
      //this.listQuery.page 表示当前页码
      this.$store.dispatch("setCurrentPage", this.listQuery.page);
    } else {
    
    
      this.$store.dispatch("setCurrentPage", 1);
    }
    next();
  }
}

2. Add the following information to the paging component of the current list page (such as elementUIthe el-paginationpaging component):

Code before:

<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>

Code now:

<el-pagination 
 v-if="total != 0"  //用于解决页面变了，但是页码视图没有更新的问题
 background @size-change="handleSizeChange" 
 @current-change="handleCurrentChange" 
 :current-page.sync="listQuery.page" //添加了.sync
 :page-sizes="[10, 20, 30, 50]" 
 :page-size="listQuery.pageNum" 
 layout="total, sizes, prev, pager, next, jumper" 
 :total="total"> </el-pagination>

3. Add a back button to the details page (optional)

Adding a return to the details page is not a necessary step to realize remembering pagination information. So this step is optional. When the user returns to the list page from the details page, the paging logic of the list page will be followed. Adding a back button increases the user experience and facilitates users to quickly return to the previous page.

code show as below:

<el-button type="info" @click="$router.back()" icon="el-icon-back">返回</el-button>

4. By the way, to summarize, there are 2 types and 5 methods to return to the previous page:

1. If the project uses vue-router, the following two types can be used:

1. this.$router.go(-1)

   1. this.$router.go(-1) //back+refresh;
   2. this.$router.go(0) //Refresh;
   3. this.$router.go(1) //forward;

   Side effect: the content in the original page form will be lost.

2. this.$router.back()

   1. this.$router.back() //Back
   2. this.$router.back(0) //Refresh
   3. this.$router.back(1) //forward;

   Side effect: the content in the original page table form will be preserved.

2. You can also use the native method of JS:

1. history.go(-1);

2. history.back();

So what is the difference between the vue method and the JS method:

history.go(-1) is to return to the previous page of the browser, and because Vue is a single-page application, some browsers do not consider hash changes as two different pages, and will not jump back to browse in hash mode previous page

5. In summary, remember that the page number information of the current page has nothing to do with the framework, but only with vuex, so it can be used in any vue project

From the above code, you also found that remembering the current page number is actually used. vuexThis feature that can retain global variables has nothing to do with the current elementUIfront-end UIframework, which means you can use it vuein any project.

Essentially, it doesn't even need vuexto be used to implement, for example, you can use H5the local storage ( localstage) object to implement the function of saving pages.

If you have difficulties in web front-end development, interviews, and front-end learning routes, you can add me V: imqdcnn. Answer questions for free, and technical experts who have been deep in the industry for many years will help you solve bugs.

I wish you can become an excellent WEB front-end development engineer!