Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query
Vue-Router動(dòng)態(tài)更改當(dāng)前頁(yè)url query
在網(wǎng)上試過(guò)很多方法。僅這一種生效。
猜測(cè)可能是淺拷貝的問(wèn)題。
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)百度，不知道大家有沒(méi)有發(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è)面怎么辦，這里就可以通過(guò)修改vue的query參數(shù)來(lái)實(shí)現(xiàn)。
- 2-1：我們?cè)谶M(jìn)入這個(gè)列表頁(yè)的時(shí)候，給一個(gè)初始默認(rèn)值，例如：page=1
不用擔(dān)心頁(yè)面路由問(wèn)題，只要問(wèn)號(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)文章
詳解vue2.0模擬后臺(tái)json數(shù)據(jù)
這篇文章主要介紹了vue2.0模擬后臺(tái)json數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語(yǔ)法糖,父組件通過(guò)給子組件定義ref訪問(wèn)其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下2024-06-06
本文主要介紹了Vuex3和Vuex4有哪些區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展
這篇文章主要為大家介紹了富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue使用event.dataTransfer實(shí)現(xiàn)A容器數(shù)據(jù)拖拽復(fù)制到B容器方式
這篇文章主要介紹了vue使用event.dataTransfer實(shí)現(xiàn)A容器數(shù)據(jù)拖拽復(fù)制到B容器方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-02-02
前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實(shí)現(xiàn)記住密碼功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue項(xiàng)目如何部署運(yùn)行到tomcat上
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Vue3如何按照某個(gè)字段將數(shù)組分成多個(gè)數(shù)組
這篇文章主要介紹了Vue3如何按照某個(gè)字段將數(shù)組分成多個(gè)數(shù)組的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-07-07
讓webpack+vue-cil項(xiàng)目不再自動(dòng)打開瀏覽器的方法
今天小編就為大家分享一篇讓webpack+vue-cil項(xiàng)目不再自動(dòng)打開瀏覽器的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09