vue-router 实时动态替换路由参数((地址栏)参数)
应用场景:例如:页面上有多个tab,点击不同的tab,跳转到不同的页面上去,再次返回的时候,需要知道上次点击的是哪个tab,这样不用存缓存,直接改路由参数,然后直接返回就可以了;用法如下:import merge from 'webpack-merge';//如果路由没有参数name,就新增一个参数,如果有的话,就是修改name的值//可以修改多个参数this.$router.push({quer
·
应用场景:
例如:页面上有多个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()会直接跳转到上上一个页面。
更多推荐
已为社区贡献14条内容
所有评论(0)