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