vue-router实时动态替换路由参数
曾曾子 人气:0实时动态替换路由参数(地址栏参数)
应用场景
例如:
页面上有多个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'}) })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容