關于vue+element-ui項目的分頁，返回默認顯示第一頁的問題解決

YFan 發布于2019-08-26 13:22 / 1862人閱讀

摘要：所以這就導致，頁面內容正確，但是頁碼高亮依舊是第一頁解決辦法我們需要在之后刷新這個分頁組件或者讓分頁組件的后于之后加載到頁面。然后再次測試，發現完美解決問題。

問題描述

當前頁面如下

然后點擊頁碼跳到第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的分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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