关于vue+element-ui项目的分页，返回默认显示第一页的问题解决

YFan 发布于2019-08-26 13:22 / 1851人阅读

摘要：所以这就导致，页面内容正确，但是页码高亮依旧是第一页解决办法我们需要在之后刷新这个分页组件或者让分页组件的后于之后加载到页面。然后再次测试，发现完美解决问题。

问题描述

当前页面如下

然后点击页码跳到第3页，然后在第三页点击页面链接跳转到新的页面

然后在新页面点击返回按钮，返回到当前页，结果页面分页显示第一页，对应页面内容也是第一页

期望效果

从新页面返回的时候，页码和页面内容仍旧保持在跳转离开前的样子。

解决办法 利用localStorage或者sessionStorage将跳转页面前的currentPage存储起来，然后，再次返回当前页的时候，在created生命周期里，获取到存储的currentPage，再进行加载代码解释我这里用的是sessionStorage，关于sessionStorage的使用，我这边先做下解释，以免后面看不懂。之前开发的时候我是先在全局定义了两个sessionStorage的方法，用于存取值

//给sessionStorage存值
setContextData: function(key, value) { 
    if(typeof value == "string"){
        sessionStorage.setItem(key, value);
    }else{
        sessionStorage.setItem(key, JSON.stringify(value));
    }
},
// 从sessionStorage取值
getContextData: function(key){
    const str = sessionStorage.getItem(key);
    if( typeof str == "string" ){
        try{
            return JSON.parse(str);
        }catch(e) {
            return str;
        }
    }
    return;
}

分页代码

然后将currentPage在每次点击页码的时候存到sessionStorage里

这里解释下，qryTableData()是我定义的请求接口交易，刷新页面内容的方法。

然后在当前页的created生命周期里从sessionStorage里面取currentPage。

这样，我们再返回当前页的时候，页面内容将会是跳转离开前的样子。

但是至此工作仅仅完成一半，因为我们发现这个bug并没有完全解决

问题造成原因
我们返回当前页面取得总条数totalNum的之前，element-ui的分页组件已经在页面加载完毕，当时的totalNum绑定的是data里面初始化的数据0，所以当总条数为0的时候，分页组件的页码默认为1。并且当totalNum在created生命周期里取得数据后，分页组件也不会刷新。所以这就导致， 页面内容正确，但是页码高亮依旧是第一页

解决办法
我们需要在created之后刷新这个分页组件或者让分页组件的html后于created之后加载到页面。
再次刷新这个分页组件是不现实的，我们选择在created之后加载分页组件。具体办法就是使用v-if。在totalNum不为data里面给的初始值0的时候，才让这段html加载到页面。

然后再次测试，发现完美解决问题。

后续：
这里为什么用的是v-if而不是v-show。这就是每个vue初学者需要明白的事情了，就是v-if和v-show的区别。嘿嘿

GPU云服务器云服务器 java中的分页显示 php 下一页的代码关于webview显示问题 html的分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108688.html

Graphql实践——像axios一样使用Graphql

摘要：初始化项目使用初始化项目安装项目结构如下接口所有接口对封装接下来对进行封装，加上中间件实现类似于拦截器的效果。 Graphql尝鲜在只学习graphql client端知识的过程中，我们常常需要一个graphql ide来提示graphql语法，以及实现graphql的server端来进行练手。graphql社区提供了graphiql让我们使用 graphiql (npm)：一个交互...

mumumu 2019-08-22 18:24 评论0 收藏0
Django 学习小组：博客开发实战第三周教程——文章列表分页和代码语法高亮

摘要：本教程内容已过时，更新版教程请访问博客开发入门教程。当分页较多时，总是显示当前页及其前几页和后几页的页码教程中使用的是两页，其他页码用省略号代替。本教程内容已过时，更新版教程请访问： django 博客开发入门教程。摘要：前两期教程我们实现了博客的 Model 部分，以及 Blog 的首页视图 IndexView，详情页面 DetailView，以及分类页面 CategoryVi...

Luosunce 2019-07-25 10:28 评论0 收藏0
jq easyui数据网络的分页过程

摘要：在涉及到组件的分页功能时，遇到了一点问题。由于数据较多，这边不予展示。返回的数据必须是符合要求的数据，格式如下必须带有属性，属性值为总共的数据条数，是这一页的数据内容，以数组对象的形式返回。第一次写技术方面的文章，有点忐忑，总怕自己讲的不对误导别人。但是万事总有个开头，有不足错误之处，请各位读者老爷指出。言归正传，最近刚进新公司，上头要求我先熟悉熟悉easyui这个组件库。在涉及到...

Rainie 2019-08-21 10:53 评论0 收藏0
jq easyui数据网络的分页过程

摘要：在涉及到组件的分页功能时，遇到了一点问题。由于数据较多，这边不予展示。返回的数据必须是符合要求的数据，格式如下必须带有属性，属性值为总共的数据条数，是这一页的数据内容，以数组对象的形式返回。第一次写技术方面的文章，有点忐忑，总怕自己讲的不对误导别人。但是万事总有个开头，有不足错误之处，请各位读者老爷指出。言归正传，最近刚进新公司，上头要求我先熟悉熟悉easyui这个组件库。在涉及到...

array_huang 2019-08-01 15:21 评论0 收藏0
Web打印探秘

摘要：笔者最近做了一个在构建打印模板的需求，从中学习到一些有价值的东西，特地记录一篇文章分享。此时，浏览器会弹出打印预览的窗口，通过页面生成了用于打印预览。最后，联想到也可用于实现打印模板需求，笔者以和模板为例进行了一个简单的实践。笔者最近做了一个在 Web 构建打印模板的需求，从中学习到一些有价值的东西，特地记录一篇文章分享。概述本文首先描述笔者所处的项目组的 Web 打印项目的需求...

ymyang 2019-08-23 16:06 评论0 收藏0