vue-router如何实时动态替换路由参数(地址栏参数)
作者：曾曾子
这篇文章主要介绍了vue-router如何实时动态替换路由参数(地址栏参数)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
实时动态替换路由参数(地址栏参数)
应用场景
例如：
页面上有多个tab，点击不同的tab，跳转到不同的页面上去，再次返回的时候，需要知道上次点击的是哪个tab，这样不用存缓存，直接改路由参数，然后直接返回就可以了；
用法如下
import merge from 'webpack-merge';
//如果路由没有参数name,就新增一个参数，如果有的话，就是修改name的值
//可以修改多个参数
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'
})
});
//替换所有的参数
this.$router.push({
query:merge({},{'name':'小米'})
})
this.$router.replace({
query:merge({},{'name':'小米'})
}) replace()和push() 的区别
1. this.$router.push()
描述：此方法会向history栈添加一个记录，返回this.$router.back()会返回到上一个页面。
2.this.$router.replace()
描述：此方法不会向history里面添加新的记录，返回this.$router.back()会直接跳转到上上一个页面。
动态替换路由-Url参数
动态替换和修改URL的参数，可使用webpack-merge包来完成。
安装webpack-merge
npm install webpack-merge --D
引入包
import merge from 'webpack-merge'
操作参数
新增
// 新增一个id
this.$router.push({
query:merge(this.$route.query,{'id':'123'})
})修改
// 修改id
this.$router.push({
query:merge(this.$route.query,{'id':'456'})
})替换
// 替换所有参数为userId
this.$router.push({
query:merge({},{'userId':'xxx123456'})
})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。