vue 路由跳转详情页，返回时页码依然在当前页

本文主要是介绍vue 路由跳转详情页，返回时页码依然在当前页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先项目中使用的是element-ui，用的el-table,el-pagination

1.使用vuex,把当前页存起来

在store中新建一个modules,命名list.js文件

const list = {state: {currentPage: 1},mutations: {SET_CURRENT_PAGE: (state, currentPage) => {state.currentPage = currentPage;}},actions: {setCurrentPage({ commit }, currentPage) {commit("SET_CURRENT_PAGE", currentPage);}}
};
export default list;

在store/index.js中导入 list:

import backtolist from "./modules/list";
import getters from "./getters";
...
const store = new Vuex.Store({modules: {list },getters
});export default store;

在getters.js中获取定义好的currentPage变量

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

在当前的表格的vue文件table.vue中写，因为我这个table,vue是子组件，导致beforeRouteLeave无效，watch监听路由还获取不到from值，所以采用以下方法，在父组件中使用beforeRouteEnter路由钩子

table.vue  子组件
import { mapGetters } from 'vuex'
data() {return {query: {page: 1,limit: 15},}},computed: {...mapGetters(['currentPage'])//获取当前页码}methods: {//进入详情的时候把当前页码存起来handleOperator(row) {this.$router.push({path: '/detail'})this.$store.dispatch("setCurrentPage", this.query.page);},
}父组件list.vue
//进入页面就会执行该路由钩子beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this` 因为当守卫执行前，组件实例还没被创建// 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。next(vm => {// 通过 `vm` 访问组件实例//如果是从detail详情页跳转过来的吧分页初始化if (from.name != 'detail') {vm.$store.dispatch('setCurrentPage', 1)}vm.$refs['tableList'].getData()//重新获取数据})},

这里需要注意的是beforeRouteEnter和mounted执行的先后顺序

beforeRouteEnter (to, from, next) {console.log(1)getData(str) // 接口.then(({ data}) => {console.log(5)next(vm => {console.log(7)vm.tableData = dataconsole.log(4)})})},created() {console.log(2)},mounted() {console.log(3)},
执行控制台打印出的顺序
1 5 2 3 7 4

 到这里会遇到一个问el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题，这是element的分页bug，使用v-if绑定分页。每次搜索的时候就会注销掉一个分页的Dom，等数据刷新完毕，再渲染一个相同的分页，重新渲染必须放到$nextTick中

<el-paginationv-if="pageShow":current-page.sync="currentPage":page-size.sync="pageSize":page-sizes="pageSizes":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>methods: {async getData(obj) {this.pageShow = false;if (!obj) {this.query.page = this.currentPage}this.tableLoading = trueconst params = { ...this.filter, ...this.query }const { data, meta } = await getData(params)if (typeof data === 'undefined') {this.dataList = []} else {this.dataList = data}this.total = meta.totalthis.tableLoading = false//处理数据变了，当前页码并没有变的问题this.$nextTick(()=>{this.pageShow = true;});}
}

这篇关于vue 路由跳转详情页，返回时页码依然在当前页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---