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