Vue3翻頁后刷新并保持該頁面數(shù)據(jù)方式
問題描述
在vue3中頁面翻頁然后刷新會自動回到第一頁，例如：
此時是在第2頁
刷新之后，它有跳轉(zhuǎn)回到了第一頁
問題解決
那么我們應(yīng)該如何解決該問題呢？
1.由于該頁面的數(shù)據(jù)是按照條件進(jìn)行查詢的，組件之間存在數(shù)據(jù)的通信，因此我們使用了pinia將數(shù)據(jù)定義在了一起
2.跳轉(zhuǎn)到第二頁的數(shù)據(jù)，那么pinia中的page應(yīng)該為2，刷新頁面后，page會變回到原始定義的數(shù)據(jù)1，所以刷新頁面后，第2頁的數(shù)據(jù)無法保持，回到第1頁
3.我們選擇將page帶入到route中,每次刷新頁面，將獲取route中的page,保持刷新后也是第2頁的數(shù)據(jù)
4..找到點擊跳轉(zhuǎn)頁面的方法,點擊后會獲取val(頁碼,點擊第2頁)，將頁碼帶入到route,此時pinia中的page為2，并且通過getSingerData方法更新頁面為第2頁的數(shù)據(jù)
5.頁面打開時就應(yīng)該獲取數(shù)據(jù)，獲取到route的page后傳遞到pinia中的page,那么每次刷新就會根據(jù)page獲取相應(yīng)頁碼的數(shù)據(jù)，本來想在pinia中直接使用route,但route一般只定義在setup函數(shù)中
6.導(dǎo)航欄的跳轉(zhuǎn)也應(yīng)該改為第1頁，
7.當(dāng)前選中頁也須修改（刷新后會保持該頁選中）
注意事項
由于左側(cè)導(dǎo)航欄刷新該頁后應(yīng)該時默認(rèn)選中的狀態(tài)，上面6（刷新后不會默認(rèn)選中）中的index進(jìn)行了重新修改，如下：
總結(jié)
1.tabs跳轉(zhuǎn)：route,query.page為1，一進(jìn)入頁面就獲取page為1的數(shù)據(jù)列表
2.點擊第二頁，route,query.page為2，更新pinia的page,立即獲取第2頁數(shù)據(jù)并刷新頁面
3.重新刷新頁面就是獲取route,query.page中的2進(jìn)行頁面的刷新，而不是pinia的page了，因為此時pinia中的page刷新后是1
4.當(dāng)前選中頁也應(yīng)該是route,query.page，否則刷新后變回1
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目打包:修改dist文件名方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue結(jié)合echarts實現(xiàn)繪制水滴圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合echarts實現(xiàn)水滴圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
相信很多人在用Vue使用別人的組件時,會用到 Vue.use() ,例如：Vue.use(VueRouter)、Vue.use(MintUI),這篇文章主要給大家介紹了關(guān)于Vue中Vue.use()的原理及基本使用的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue打包npm run build時候界面報錯的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF方法流程詳解
在日常的工作中，有時候會碰到需要將某個網(wǎng)址網(wǎng)頁保存成為pdf的情況，這篇文章主要介紹了用Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)購物車的小練習(xí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue使用自定義的icon圖標(biāo)的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了VUE 全局變量的幾種實現(xiàn)方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue如何使用Promise.all()方法并行執(zhí)行多個請求
在Vue中,可以使用Promise.all()方法并行執(zhí)行多個異步請求,當(dāng)所有請求都成功返回時,Promise.all()將返回一個包含所有請求結(jié)果的數(shù)組,如果其中任何一個請求失敗,則會觸發(fā)catch()方法并返回錯誤信息,這種方式可以顯著提高程序的性能和響應(yīng)速度2025-01-01