vue 替换路由地址参数(动态修改路由参数)
在项目中,比如进入我的订单页面,订单页面有不同的几个菜单,如:待付款、待发货、待收货、待收货等;我们想要实现从不同的菜单点击进入订单详情页,再返回订单列表的时候,还是定位在之前对应的菜单,这时候就需要用到替换路由参数。我们可以在执行点击菜单的时候,就替换掉路由地址的参数,以便于之后返回该订单列表的时候,还是定位在对应的菜单项。替换路由地址参数,代码执行如下:this.$router.replace
·
1.此种方式适用于直接替换已存在的路由参数值,无需新增或删除路由参数:
在项目中,比如进入我的订单页面,订单页面有不同的几个菜单,如:待付款、待发货、待收货、待收货等;
我们想要实现从不同的菜单点击进入订单详情页,再返回订单列表的时候,还是定位在之前对应的菜单,这时候就需要用到替换路由参数。
我们可以在执行点击菜单的时候,就替换掉路由地址的参数,以便于之后返回该订单列表的时候,还是定位在对应的菜单项。
替换路由地址参数,代码执行如下:
this.$router.replace({ name: 'Orders', params: { tabId: index } })
rouer.js路由定义为:
{
path: '/orders/:tabId',
name: 'Orders',
component: () => import('@/views/orders/index')
}
2.此种方式适用于想要新增、删除、修改路由参数或参数值,更好使:
其实新增和修改是同样的,它会自行判断是否存在这个参数名,有的话就修改,没有的话就新增。(经本人自行测试后得出的结果)
import merge from 'webpack-merge';
// 修改原有参数
this.$router.push({
query:merge(this.$route.query,{'maxPrice':'630'})
})
// 新增一个参数:
this.$router.push({
query:merge(this.$route.query,{'addParams':'我是新增的一个参数,哈哈哈哈'})
})
// 替换所有参数:
this.$router.push({
query:merge({},{'maxPrice':'630'})
目前没找到单个删除路由参数的方法,比如路由参数默认有a,b,c三个参数,我想删除a,保留b和c参数,添加d参数,这个时候就不知道怎么去删除a最方便,我的做法比较蠢,相当于先重置路由参数,再往里添加b,c,d参数:
this.$router.push({
query:merge({},
{
'b':'b',
'c':'c',
'd':'d',
})
})
如果有朋友知道怎么单个删除路由参数最方便,跪求告知,感谢!
更多推荐
所有评论(0)