Vue 中 动态 修改 路由 的params和query 1. 前言 ​ 经常在项目中需要 动态 的 修改 路由 的 params 和 query，便于更好的传递到其它需要使用的页面。当然可以选择使用 Vue X来管理这两个 参数 ，但是 Vue X 所带来的的负担已经远远高于 动态 的 修改 路由 了。 2. 动态 修改 ​ 假设你需要 动态 修改 的 params为 paramsDynamic, 需要 动态 修改 的query 为 queryDynamic。 this.$router.push({ params: {...this.$route.

在项目中，比如进入我的订单页面，订单页面有不同的几个菜单，如：待付款、待发货、待收货、待收货等； 我们想要实现从不同的菜单点击进入订单详情页，再返回订单列表的时候，还是定位在之前对应的菜单，这时候就需要用到替换 路由 参数 。 我们可以在执行点击菜单的时候，就替换掉 路由 地址的 参数 ，以便于之后返回该订单列表的时候，还是定位在对应的菜单项。 替换 路由 地址 参数 ，代码执行如下： this.$router.replace({ name: 'Orders', params: { tabId: index } }) 新增一个 参数 ： this.$router.push({ query:merge(this.$route.query,{'addParams':'我是新增的一个 参数 ，哈哈哈哈'}) 替换所有 参数 ： import Vue from ' vue ' import App from './App. vue ' import Vue Router from ' vue -router' import router from './router' Vue .use( Vue Router) Vue .config.productionTip = false new Vue ({ 就可以 修改 了 但是当已有query对象里面 修改 其中一个值，就会发现虽然this.$route.query发生改变但是浏览器的url上的 参数 并没有发生变化， 尝试将已有的 参数 进行深拷贝突然发现就可以了 let newQuery= JSON.parse(JSON.stringify(this.$route.query)); newQuery.index = 2;