Vue Router 关于 添加、删除query中个别的参数

Vue Router 关于 添加、删除query中个别的参数

在写项目过程中涉及到一个需求，大概形容一下就是点击表格中对应的某个值进行跳转到表头的其他tab，目前是再返回的时候数据会自动刷新，所以需要再返回的时候，准确定位到刚刚点的那个title对应的页面页数以及行数，在把它勾选上，置灰背景，因为要跳转的内容共用一套表格，来回切会更新记录，为了保存住跳转那一刻的页码以及title的id 所以要存到url上 ，需求不难 过程不详述 由于涉及到url网址上的参数 添加或删除，只记录query的问题

首先是 添加一个参数

假如添加一个 page为1 ，id为123456 的参数

this.$router.replace({ query: { ...this.$route.query, page: '1'，id:123456 } })

删除 一个参数

这一块稍微会有点复杂 涉及深浅拷贝 比如正确回退到对应的页面后，为了不影响下一次的刷新 能再次获得第一页的数据 所以需要删除page参数

let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 先拷贝一个一模一样的对象
delete newQuery.page //再删除page
this.$router.replace({ query: newQuery }) //再把新的替换了

这样就完成了跳转后的删除
对了 删除还有一个办法 如果有引入 lodash, 可以写成: let newQuery = _.omit(this.$route.query, ‘page’) 来删除参数