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

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

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

實時動態(tài)替換路由參數(shù)(地址欄參數(shù))

應用場景

例如：

頁面上有多個tab，點擊不同的tab，跳轉到不同的頁面上去，再次返回的時候，需要知道上次點擊的是哪個tab，這樣不用存緩存，直接改路由參數(shù)，然后直接返回就可以了；

用法如下

import merge from 'webpack-merge';
//如果路由沒有參數(shù)name,就新增一個參數(shù)，如果有的話，就是修改name的值
//可以修改多個參數(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() 

描述：此方法會向history棧添加一個記錄，返回this.$router.back()會返回到上一個頁面。

2.this.$router.replace() 

描述：此方法不會向history里面添加新的記錄，返回this.$router.back()會直接跳轉到上上一個頁面。

動態(tài)替換路由-Url參數(shù)

動態(tài)替換和修改URL的參數(shù)，可使用webpack-merge包來完成。

安裝webpack-merge

npm install webpack-merge --D

引入包

import merge from 'webpack-merge'

操作參數(shù)

新增

// 新增一個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'})
})

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論