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;
      });
    }
}
相关推荐
前端_学习之路28 分钟前
React--Fiber 架构
前端·react.js·架构
coderlin_31 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css