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;
      });
    }
}
相关推荐
mapbar_front7 分钟前
面试问题—上家公司的离职原因
前端·面试
昔人'41 分钟前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'44 分钟前
css `dorp-shadow`
前端·css
流***陌1 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
可触的未来,发芽的智生1 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
烛阴2 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python
前端开发爱好者2 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
why技术2 小时前
从18w到1600w播放量,我的一点思考。
java·前端·后端
欧阳呀2 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
清风徐来QCQ2 小时前
css总结
前端