从以上代码中，你也发现了，其实记住当前页码是使用了`vuex`的这个能保留全局变量的特性，与当前`elementUI`等前端`UI`框架无关，意味着你可以用于任何`vue`项目中
先来看看效果：
效果文字描述：
1、初始为页码1
2、点击页码4
3、跳转到第4页
4、点击右侧的按钮，跳转到详情页
5、展示的详情页，点击详情页的返回上一页按钮
6、回到列表页，列表页会定位到上一次的分页信息，即4.
一、在vuex中需要完成的工作
1、在store中新建一个modules（大部分vuex都会用modules来分割），比如取名为：backtolist.js，代码如下
/*
记住当前分页信息，以便从详情页或其他页面返回列表页时，能还原上次页码
*/
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.js中导入 backtolist:
import backtolist from "./modules/backtolist";
import getters from "./getters";
...
const store = new Vuex.Store({
modules: {
backtolist //返回上一级时，保留页码信息
},
getters
});
export default store;3、在getters.js中获取定义好的currentPage变量
const getters = {
...
currentPage: (state) => state.backtolist.currentPage,
};
export default getters;
二、在需要记住页面信息的列表页组件中添加如下代码，比如list.vue:
1、在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、在当前列表页的分页组件中（比如elementUI的el-pagination分页组件）添加如下信息：
之前的代码：
<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>现在的代码：
<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>三、在详情页添加返回按钮（可选）
在详情页添加返回不是实现记住分页信息的必须步骤。所以本步骤可选。当用户从详情页回到列表页，就会走列表页分页逻辑。添加返回按钮，是增加了用户体验，方便用户快速回到上一页。
代码如下：
<el-button type="info" @click="$router.back()" icon="el-icon-back">返回</el-button>四、顺便来总结下，能返回上一级页面的方法有3类5种：
1、若项目使用vue-router，则可以用以下两种：
-
this.$router.go(-1)
- this.$router.go(-1) //后退+刷新；
- this.$router.go(0) //刷新；
- this.$router.go(1) //前进；
副作用：原页面表单中的内容会丢失。
-
this.$router.back()
- this.$router.back() //后退
- this.$router.back(0) //刷新
- this.$router.back(1) //前进；
副作用：原页表表单中的内容会保留。
2、也可使用JS的原生方法：
-
history.go(-1);
-
history.back();
3、直接用路由的push方法
该方法其实就是常规的vue的页面跳转方法，严格意义上来说不是返回到上一级。因为它可以跳转到任意路由页面。
// vue组件
<el-button type="primary" size="small" @click="backClick">返回</el-button>
//新增路由
backClick() {
this.$router.push({
name: "list"
});
},那么vue的方法和JS的方法区别在哪里：
history.go(-1)是返回浏览器的上一页，而由于Vue是单页面应用，有的浏览器对于hash变更不认为是两个不同的页面，在hash模式下就不会跳回浏览器上一页
五、更简单的实现方法
注意：在这里用的是getters，其实直接用state也可以，代码改为如下：
1、list.vue中，需要修改2个地方
//1、第一个修改的地方
//将：
import { mapGetters } from "vuex";
//改为：
import { mapState } from "vuex";
//2、第二个修改的地方
computed: {
//将
...mapGetters([
// 获得翻页信息
"currentPage"
])
//改为：
...mapState({
currentPage: (state) => state.backtolist.currentPage
})
},2、store中getter.js修改的地方：
将如下代码删除：
currentPage: (state) => state.backtolist.currentPage,这样也能起到一样的效果。
他们的区别就是state是getters的计算得到的结果。就像data之于computed。
六、总结，记住当前页面页码信息与框架无关，只与vuex有关，所以可以用于任意vue项目中
从以上代码中，你也发现了，其实记住当前页码是使用了vuex的这个能保留全局变量的特性，与当前elementUI等前端UI框架无关，意味着你可以用于任何vue项目中。
本质上来说，甚至不需要用vuex来实现，比如你可以用H5的本地存储（localstage）对象来实现保存页面的功能。
