Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query
Vue-Router動(dòng)態(tài)更改當(dāng)前頁(yè)url query
在網(wǎng)上試過很多方法。僅這一種生效。
猜測(cè)可能是淺拷貝的問題。
Vue-Router版本：3.2.0
// 需要被注入的query
const uid = "12345";
// 原url query
const {...query} = this.$route.query;
// 替換新query
this.$router.replace({query: {...query, uid}});Vue修改當(dāng)前頁(yè)面query參數(shù)
最近在項(xiàng)目中手寫分頁(yè)器（為什么手寫，因?yàn)閷?duì)分頁(yè)器樣式外觀要求比較嚴(yán)苛），遇到一個(gè)需求，就是我們?cè)邳c(diǎn)擊分頁(yè)的時(shí)候，再進(jìn)入詳情，之后回退希望能夠回到之前的頁(yè)碼值。
解決這個(gè)需求，個(gè)人總結(jié)了兩種方法。
1：對(duì)標(biāo)百度，不知道大家有沒有發(fā)現(xiàn) 百度在進(jìn)入詳情頁(yè)采取的方式是新開一個(gè)頁(yè)面，這樣我們回退到列表頁(yè)的時(shí)候，頁(yè)碼值保持不變。
這是一種可取的簡(jiǎn)單的方式,實(shí)現(xiàn)思路為：
生成一個(gè)a鏈接，然后指定a的href屬性和target屬性，再模擬a的點(diǎn)擊事件即可！
2：但是有時(shí)候我們的甲方不想新開頁(yè)面怎么辦，這里就可以通過修改vue的query參數(shù)來實(shí)現(xiàn)。
- 2-1：我們?cè)谶M(jìn)入這個(gè)列表頁(yè)的時(shí)候，給一個(gè)初始默認(rèn)值，例如：page=1
不用擔(dān)心頁(yè)面路由問題，只要問號(hào)前面的路由是對(duì)的，不影響頁(yè)面跳轉(zhuǎn)
- 2-2：我們需要在分頁(yè)器事件的時(shí)候改變?yōu)g覽器中的query值
其中的currentPage是我們當(dāng)前的頁(yè)碼值，我們就是將它賦值給我們的query里面的參數(shù)
從而實(shí)現(xiàn)點(diǎn)擊分頁(yè)器，就能動(dòng)態(tài)的改變路徑中的值。
const query=JSON.parse(JSON.stringify(this.$route.query))
query.page=this.currentPage//你的分頁(yè)器頁(yè)碼值變量
this.$router.push({ path: this.$route.path, query })這樣我們?cè)邳c(diǎn)擊進(jìn)入詳情頁(yè)后，回退依舊是當(dāng)前的頁(yè)碼值，之后大家判斷調(diào)接口就好了！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue3.2中setup語(yǔ)法糖的具體使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們深入了解Vue有一定的幫助，需要的可以參考一下2023-05-05
vue+element-ui監(jiān)聽滾動(dòng)實(shí)現(xiàn)錨點(diǎn)定位方式(雙向),錨點(diǎn)問題
這篇文章主要介紹了vue+element-ui監(jiān)聽滾動(dòng)實(shí)現(xiàn)錨點(diǎn)定位方式(雙向),錨點(diǎn)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue如何實(shí)現(xiàn)observer和watcher源碼解析
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)observer和watcher源碼的相關(guān)資料，分析vue的observe實(shí)現(xiàn)源碼，聊聊如何一步一步實(shí)現(xiàn)$watch，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家介紹了vue實(shí)現(xiàn)列表展示的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue如何通過image-conversion實(shí)現(xiàn)圖片壓縮詳解
在Vue項(xiàng)目中上傳大圖片時(shí),可以通過image-conversion庫(kù)壓縮至指定大小,這篇文章主要介紹了vue如何通過image-conversion實(shí)現(xiàn)圖片壓縮的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
本篇文章主要介紹了自定義vue全局組件use使用、vuex的使用詳解，本文主要來講解一下怎么樣定義一個(gè)全局組件,并解釋vue.use()的原理2017-06-06
這篇文章主要介紹了vue項(xiàng)目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要給大家介紹了關(guān)于Vue中進(jìn)行打包與部署的相關(guān)資料, 我們常使用前后端分離項(xiàng)目時(shí),會(huì)需要將前端vue打包然后部署,需要的朋友可以參考下2023-09-09
對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
今天小編就為大家分享一篇對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了將Vue組件庫(kù)更換為按需加載的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05