vue动态改变地址栏的参数值

时间:2022-09-28 whylost迷心人气:0

动态改变地址栏的参数值

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

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

加载全部内容