欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))

 更新時(shí)間：2022年09月23日 11:19:19   作者：曾曾子  
這篇文章主要介紹了vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

實(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ù)，如果有的話，就是修改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)文章

最新評(píng)論