VUE，记录分页信息，返回到上次的分页

短命女 2023-01-07 10:12 227阅读 0赞

### 分页，从列表进入详情页后，再返回列表，需要记录下上次的分页 ###

> 1 创建store

const state = {
      page: 1
    }
    
    const mutations = {
      SET_QUERY_PARAMS: (state, page ) => {
        state.page = page
      }
    }
    
    const actions = {
      setQueryParams({ commit }, page) {
        commit('SET_QUERY_PARAMS', page)
      }
    }
    
    export default {
      namespaced: true,
      state,
      mutations,
      actions
    }

> 2 在列表页进入详情页时，记录下当前分页信息

// 保存翻页的信息，返回之后回到上次的页面，比如：修改后的返回
      beforeRouteLeave(to, from, next) {
        // 只有跳转到指定的详情页才记录翻页信息
        if (to.name === 'pageDetail') {
          this.$store.dispatch('queryParams/setQueryParams', this.currentPage);
        } else {
          this.$store.dispatch('queryParams/setQueryParams', 1);
        }
        next()
      },

> 3 当从详情页返回列表时，从store里读取出上次记录的值

computed: {
        ...mapGetters([
          // 获得翻页信息
          'page'
        ])
     },
     mounted() {
        // 读取store里的上次分页信息
        this.currentPage = this.page;
     },

> 4 分页信息更新，UI不同步显示当前页

<el-pagination
        // fix 分页信息更新，UI不同步显示当前页，total表示所有记录数
        v-if="total != 0"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        :current-page.sync="currentPage"
        @current-change="currentChange"
      ></el-pagination>

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue分页删除最后一条数据，返回上一级的分页

> 在VUE+element使用 Pagination 分页分页的时候当数据较多时使用element中的分页功能,在删除第二页的最后一条数据时,当前页数转成了上一页,可是页面

太过爱你忘了你带给我的痛/ 2024年03月30日 13:54/ 0 赞/ 72 阅读

相关前端分页（vue前端分页，el分页，el-pagination分页，饿了吗分页）

简述：作为一名前端开发者，分页功能我们经常会用到，但有时候后端会把数据一次性给我们，需要我们自己处理数据，做前端分页，下面给大家介绍如何实现，其实很简单，就是使用数组的sli

缺乏、安全感/ 2023年10月04日 21:52/ 0 赞/ 79 阅读

相关 VUE，记录分页信息，返回到上次的分页

分页，从列表进入详情页后，再返回列表，需要记录下上次的分页 > 1 创建store const state = { page: 1 }

短命女/ 2023年01月07日 10:12/ 0 赞/ 228 阅读

相关 vue 假分页

vue3 const pageContent = reactive({ cur: 1, total: 0,

今天药忘吃喽~/ 2022年11月20日 10:55/ 0 赞/ 210 阅读

相关 vue横屏分页加载 vue 分页左右滑动分页横着分页

vue 分页加载 vue横屏分页加载关键词：横着分页，左右分页，横屏分页，左右滑动分页 b站视频地址：[https://b23.tv/sEYwH5][https_b2

拼搏现实的明天。/ 2022年11月03日 11:17/ 0 赞/ 23 阅读

相关分页介绍；分页的种类，分页的原理

1.1．分页介绍问题:为什么分页? 因为数据量比较大，为了用户有更好的体验。一般情况下，数据在展示时都会进行分页操作。分页的种类分页有两种: 1.物理

超、凢脫俗/ 2022年06月06日 12:49/ 0 赞/ 405 阅读

相关 vue 简单分页

vue 简单分页样式： .page-bar { -webkit-touch-callout: none; -web

谁借莪１个温暖的怀抱￠/ 2022年05月24日 08:00/ 0 赞/ 273 阅读

相关 vue 数据分页

数据列表分页处理在数据分类中，每页仅能显示8种具体的分类。当超出8种是自动出现第二页，同时，所有的页具有轮播效果。如图： ![在这里插入图片描述][watermar

╰+攻爆jí腚メ/ 2022年02月01日 05:49/ 0 赞/ 287 阅读

相关 supergridcontrol记录，分页

[supergridcontrol记录，分页][supergridcontrol] sqlserver分页记录 select top 50 DengJiBH,sSu

谁践踏了优雅/ 2021年11月10日 05:26/ 0 赞/ 430 阅读

相关 iview 分页------记录

iview提供的分页方法 title: '', type: 'index', width: '50px', 每一页都是从1-10记录如果

港控/mmm°/ 2021年08月29日 13:34/ 0 赞/ 378 阅读