如何通过vue-router实时动态更改地址栏中的路由参数？

本文共计639个文字，预计阅读时间需要3分钟。

目录+实时动态替换路径参数（地址栏参数）+应用场景+用法如下+replace()和push()的区别+动态替换路径-Url参数+安装webpack-merge+引入包+操作参数+实时动态替换路径参数（地址栏参数）+应用场景

目录

• 实时动态替换路由参数(地址栏参数)
• 应用场景
• 用法如下
• replace()和push() 的区别
• 动态替换路由-Url参数
• 安装webpack-merge
• 引入包
• 操作参数

实时动态替换路由参数(地址栏参数)

应用场景

例如：

页面上有多个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'}) })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。