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;
      });
    }
}
相关推荐
陈随易1 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
markyankee1012 分钟前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
ma775 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在5 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
借月7 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang8 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻9 分钟前
前端面试十一之TS
前端
摆烂为不摆烂10 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead22 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00125 分钟前
封装一个有最小化的dialog组件
前端·javascript·css