vue如何实现动态改变地址栏的参数值

目录 动态改变地址栏的参数值 监听url地址栏参数变化 1.传递参数 2.监听参数变化

动态改变地址栏的参数值

点击切换Tab，通过watch监听，在地址栏修改对应得active参数，这样刷新后还能保持最后浏览的tab

watch: {
? ? active (newValue) {
? ? ? let query = this.$router.history.current.query;
? ? ? let path = this.$router.history.current.path;
? ? ? //对象的拷贝
? ? ? let newQuery = JSON.parse(JSON.stringify(query));
? ? ? // 地址栏的参数值赋值
? ? ? newQuery.active = newValue;
? ? ? this.$router.push({ path, query: newQuery });
? ? }
? }

监听url地址栏参数变化

问题：

在开发过程中我们有可能会遇到一个问题，就是在一个vue项目中引入了一个组件，点击这个组件跳转的还是当前的页面，只是传递的参数发生了变化，这个时候我们传递的参数就不能正常的赋值了，这是因为页面没有重新加载，所以我们就要监听地址栏的参数变化了。

1.传递参数

?? ?this.$router.push({
?? ? ? ?path: url,//路由地址
?? ? ? ?query:{//参数
?? ? ? ? ? ?type: 1
?? ? ? ?}
?? ?});

2.监听参数变化

?? ?watch: {
?? ? ? ?//监听路由地址的改变
?? ? ? ?$route:{
?? ? ? ? ? ?immediate:true,
?? ? ? ? ? ?handler(){
?? ? ? ? ? ? ? ?if(this.$route.query.type){//需要监听的参数
?? ? ? ? ? ? ? ? ? ?this.type = this.$route.query.type
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
?? ?}

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

查看更多关于vue如何实现动态改变地址栏的参数值的详细内容...