Vue-Router如何動態(tài)更改當(dāng)前頁url query
Vue-Router動態(tài)更改當(dāng)前頁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修改當(dāng)前頁面query參數(shù)
最近在項目中手寫分頁器（為什么手寫，因為對分頁器樣式外觀要求比較嚴(yán)苛），遇到一個需求，就是我們在點擊分頁的時候，再進(jìn)入詳情，之后回退希望能夠回到之前的頁碼值。
解決這個需求，個人總結(jié)了兩種方法。
1：對標(biāo)百度，不知道大家有沒有發(fā)現(xiàn) 百度在進(jìn)入詳情頁采取的方式是新開一個頁面，這樣我們回退到列表頁的時候，頁碼值保持不變。
這是一種可取的簡單的方式,實現(xiàn)思路為：
生成一個a鏈接，然后指定a的href屬性和target屬性，再模擬a的點擊事件即可！
2：但是有時候我們的甲方不想新開頁面怎么辦，這里就可以通過修改vue的query參數(shù)來實現(xiàn)。
- 2-1：我們在進(jìn)入這個列表頁的時候，給一個初始默認(rèn)值，例如：page=1
不用擔(dān)心頁面路由問題，只要問號前面的路由是對的，不影響頁面跳轉(zhuǎn)
- 2-2：我們需要在分頁器事件的時候改變?yōu)g覽器中的query值
其中的currentPage是我們當(dāng)前的頁碼值，我們就是將它賦值給我們的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 })這樣我們在點擊進(jìn)入詳情頁后，回退依舊是當(dāng)前的頁碼值，之后大家判斷調(diào)接口就好了！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue2.0模擬后臺json數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下2024-06-06
本文主要介紹了Vuex3和Vuex4有哪些區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家介紹了富文本編輯器quill.js開發(fā)之自定義格式擴展,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue使用event.dataTransfer實現(xiàn)A容器數(shù)據(jù)拖拽復(fù)制到B容器方式
這篇文章主要介紹了vue使用event.dataTransfer實現(xiàn)A容器數(shù)據(jù)拖拽復(fù)制到B容器方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-02-02
前端vue+elementUI如何實現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實現(xiàn)記住密碼功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了vue項目如何部署運行到tomcat上的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Vue3如何按照某個字段將數(shù)組分成多個數(shù)組
這篇文章主要介紹了Vue3如何按照某個字段將數(shù)組分成多個數(shù)組的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-07-07
讓webpack+vue-cil項目不再自動打開瀏覽器的方法
今天小編就為大家分享一篇讓webpack+vue-cil項目不再自動打開瀏覽器的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09