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