vue 替换路由地址参数（动态修改路由参数）

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',})
})

如果有朋友知道怎么单个删除路由参数最方便，跪求告知，感谢！

vue 替换路由地址参数（动态修改路由参数）相关推荐

Simulink如何在线修改模块参数 (动态修改模块参数)
文章目录 1. 原由 2. 方法 3. DCP模块 4. 使用 5. 例程 5.1 DCP模块实现可变增益 5.2 DCP模块实现正弦扫频信号 5.3 DCP模块实现时变传递函数 5.4 DCP模块实 ...
vue 动态修改路由参数
转载自 vue 动态修改路由参数 import merge from 'webpack-merge':修改原有参数 this.$router.push({query:merge(this.$rout ...
怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
vue使用v-for循环，动态修改element-ui的el-switch
在使用element-ui的el-switch中,因为要用v-for循环,一直没有成功,后来仔细查看文档,发现可以这样写 <el-switch v-for="(item, key) i ...
动态修改路由_tutorial第二部分-路由参数
紧接着Tutorial-第一部分回顾,继续往super-rental应用添加更有趣的功能.当用户点击列表时可以进入一个详情页面,详情页面可以展示一张更大的地图. 本篇最后效果效果图本篇学习要点: ...
react 动态修改路由_升级到 React Router 4 并实现动态加载和模块热替换
这篇文章是升级到Webpack2坑--模块热替换失效页面不自动刷新?的后续.那篇文章主要说明了,升级到 Webpack 2 之后,通过升级webpack-dev-server和react-hot-lo ...
vue项目中videoPlayer 的 src 视频地址参数动态修改---方法
方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单. this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用*号框起 ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
react 动态修改路由_react.js - React 如何监听路由变化重新渲染组件
问题 // route.js class NewsList extends Component { componentWillMount () { const type = this.props.l ...

vue 替换路由地址参数（动态修改路由参数）

vue 替换路由地址参数（动态修改路由参数）相关推荐

最新文章

热门文章