vue怎么实现动态改变地址栏的参数值

蜗牛 互联网技术资讯 2022-07-29 19 0

今天小编给大家分享一下vue怎么实现动态改变地址栏的参数值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

动态改变地址栏的参数值

点击切换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怎么实现动态改变地址栏的参数值”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论