您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 290人已围观

简介 vue如何实现动态改变地址栏的参数值_vue.js_

动态改变地址栏的参数值

点击切换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                 }             }         }     }

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

您可能感兴趣的文章:

上一篇：uni-app配置APP自定义顶部标题栏设置方法与注意事项_javascript技巧_

下一篇：vue路由传参方式的方式总结及获取参数详解_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网