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 = data
          console.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-pagination
      v-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 = true
      const params = { ...this.filter, ...this.query }
      const { data, meta } = await getData(params)
      if (typeof data === 'undefined') {
        this.dataList = []
      } else {
        this.dataList = data
      }
      this.total = meta.total
      this.tableLoading = false
      //处理数据变了，当前页码并没有变的问题
      this.$nextTick(()=>{
        this.pageShow = true;
      });
    }
}