element列表跳转路由时记录当前页，返回列表时还在跳转页

_freely

于 2019-10-09 20:59:59 发布

阅读量932

点赞数

分类专栏： vue 文章标签： elementui pagination

本文链接：https://blog.youkuaiyun.com/hbjiankely/article/details/102469835

版权

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种在前端应用中优化路由跳转和分页显示的方法，通过使用sessionStorage记录当前页码，在路由跳转返回时保持在原来的页面，避免了重复加载首页数据的问题。同时，利用Vue.js的beforeRouteEnter钩子和v-if指令确保页码选中状态正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击处理跳转到详情页，要求返回时还在当前页，其他页面进入时加载第一页数据

代码实现

// 使用sessionStorage记录当前页码
sessionStorage.setItem('exceptPage', this.currentPage);
// 路由进入时
beforeRouteEnter(to, from, next) {
    if (from.path === '/nav/carDeal/exceptionDetails') {
      next(vm => {
        vm.getExceptionList(sessionStorage.getItem('exceptPage') - 0 || 1);
      });
    } else {
      next(vm => {
        vm.getExceptionList(1);
      });
    }
  }
// getExceptionList请求数据，重新赋值
    getExceptionList (val) {
        this.currentPage = val
    }
    
// 分页
    <el-pagination @current-change="getExceptionList"
                     v-if="tableData.length > 0"
                     :current-page.sync="currentPage"
                     :page-size="10"
                     layout="prev, pager, next, jumper"
                     :total='total'>
      </el-pagination>

注意：

使用v-if 正确显示页码选中状态