vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))
實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))
應(yīng)用場(chǎng)景
例如：
頁(yè)面上有多個(gè)tab，點(diǎn)擊不同的tab，跳轉(zhuǎn)到不同的頁(yè)面上去，再次返回的時(shí)候，需要知道上次點(diǎn)擊的是哪個(gè)tab，這樣不用存緩存，直接改路由參數(shù)，然后直接返回就可以了；
用法如下
import merge from 'webpack-merge';
//如果路由沒(méi)有參數(shù)name,就新增一個(gè)參數(shù)，如果有的話(huà)，就是修改name的值
//可以修改多個(gè)參數(shù)
this.$router.push({
? ? query:merge(this.$route.query,{'name':'小米'})
});
this.$router.replace({
? query: merge(this.$route.query, {'name':'小米'})
});
this.$router.push({
? ?query: merge(this.$route.query, {
? ? ?'name': '小米',
? ? ?'age':'9'
? ?})
?});
?
this.$router.replace({
? ?query: merge(this.$route.query, {
? ? ?'name': '小米',
? ? ?'age':'9'
? ?})
?});
//替換所有的參數(shù)
this.$router.push({
? ? query:merge({},{'name':'小米'})
})?
this.$router.replace({
? ? query:merge({},{'name':'小米'})
})?replace()和push() 的區(qū)別
1. this.$router.push()
描述：此方法會(huì)向history棧添加一個(gè)記錄，返回this.$router.back()會(huì)返回到上一個(gè)頁(yè)面。
2.this.$router.replace()
描述：此方法不會(huì)向history里面添加新的記錄，返回this.$router.back()會(huì)直接跳轉(zhuǎn)到上上一個(gè)頁(yè)面。
動(dòng)態(tài)替換路由-Url參數(shù)
動(dòng)態(tài)替換和修改URL的參數(shù)，可使用webpack-merge包來(lái)完成。
安裝webpack-merge
npm install webpack-merge --D
引入包
import merge from 'webpack-merge'
操作參數(shù)
新增
// 新增一個(gè)id
?this.$router.push({
? ? query:merge(this.$route.query,{'id':'123'})
})修改
// 修改id
this.$router.push({
? ? query:merge(this.$route.query,{'id':'456'})
})替換
// 替換所有參數(shù)為userId
this.$router.push({
? ? query:merge({},{'userId':'xxx123456'})
})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue進(jìn)行下載與處理二進(jìn)制流文件的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)將后端返回的二進(jìn)制流進(jìn)行處理并實(shí)現(xiàn)下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
vue :src 文件路徑錯(cuò)誤問(wèn)題的解決方法
這篇文章主要介紹了vue :src 文件路徑錯(cuò)誤問(wèn)題的簡(jiǎn)單解決方法，本文分步驟給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
關(guān)于vue.js過(guò)渡css類(lèi)名的理解(推薦)
這篇文章主要介紹了關(guān)于vue.js過(guò)渡css類(lèi)名的理解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-04-04
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue使用VueUse實(shí)現(xiàn)開(kāi)發(fā)效率提升指南
VueUse/Core?是一個(gè)基于?Composition?API?的Vue實(shí)用函數(shù)集合,它提供了一系列可復(fù)用的組合式函數(shù),涵蓋了常見(jiàn)的開(kāi)發(fā)需求,下面小編來(lái)和大家講講它的具體應(yīng)用吧2025-05-05
vue-router結(jié)合vuex實(shí)現(xiàn)用戶(hù)權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實(shí)現(xiàn)用戶(hù)權(quán)限控制功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue根據(jù)條件不同顯示不同按鈕的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue實(shí)現(xiàn)tab標(biāo)簽(標(biāo)簽超出自動(dòng)滾動(dòng))
當(dāng)創(chuàng)建的tab標(biāo)簽超出頁(yè)面可視區(qū)域時(shí)自動(dòng)滾動(dòng)一個(gè)tab標(biāo)簽距離，并可手動(dòng)點(diǎn)擊滾動(dòng)tab標(biāo)簽，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue父組件向子組件動(dòng)態(tài)傳值的兩種方法
這篇文章主要介紹了vue父組件向子組件動(dòng)態(tài)傳值的兩種方法 ,需要的朋友可以參考下2017-11-11
基于Vue 擼一個(gè)指令實(shí)現(xiàn)拖拽功能
這篇文章主要介紹了Vue 指令實(shí)現(xiàn)拖拽功能,實(shí)現(xiàn)原理很簡(jiǎn)單，文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10