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..找到點(diǎn)擊跳轉(zhuǎn)頁面的方法,點(diǎn)擊后會獲取val(頁碼,點(diǎn)擊第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)前選中頁也須修改（刷新后會保持該頁選中）
注意事項(xià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.點(diǎn)擊第二頁，route,query.page為2，更新pinia的page,立即獲取第2頁數(shù)據(jù)并刷新頁面
3.重新刷新頁面就是獲取route,query.page中的2進(jìn)行頁面的刷新，而不是pinia的page了，因?yàn)榇藭rpinia中的page刷新后是1
4.當(dāng)前選中頁也應(yīng)該是route,query.page，否則刷新后變回1
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
jdk1.8+vue elementui實(shí)現(xiàn)多級菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實(shí)現(xiàn)多級菜單功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了如何把vuejs打包出來的文件整合到springboot里,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
Vue項(xiàng)目中實(shí)現(xiàn)無感Token刷新的示例
在前端項(xiàng)目中,Token用于用戶認(rèn)證和權(quán)限管理,文章介紹了在Vue項(xiàng)目中實(shí)現(xiàn)Token的無感刷新,包括Token刷新的原理、攔截器的應(yīng)用和處理Token過期的方法,感興趣的可以了解一下2024-11-11
這篇文章主要介紹了八種Vue組件間通訊方式合集(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了Vue3基于rem比例縮放方案,本縮放方案置于hooks中即可，文中通過示例代碼介紹了vue-cli3 中使用rem布局的方法，需要的朋友可以參考下2023-05-05
當(dāng)頁面刷新時,Vuex?的?state?數(shù)據(jù)會丟失,這是因?yàn)?Vuex?的狀態(tài)存儲在內(nèi)存中,刷新瀏覽器會重置?JavaScript?的運(yùn)行環(huán)境,下面我將詳細(xì)介紹幾種解決方案,從簡單到復(fù)雜,幫助你根據(jù)項(xiàng)目需求選擇最適合的方法,需要的朋友可以參考下2025-04-04
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下2018-09-09
vue?cesium加載點(diǎn)與定位到指定位置的實(shí)現(xiàn)方法
Cesium是一個用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導(dǎo)航等,這篇文章主要介紹了vue?cesium加載點(diǎn)與定位到指定位置,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue中如何設(shè)置全局的cookie對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
VUEJS實(shí)戰(zhàn)之修復(fù)錯誤并且美化時間（2）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯誤并且美化時間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06