美文网首页
Vue路由跳转后this.$bus.$on多次触发的问题

Vue路由跳转后this.$bus.$on多次触发的问题

作者: 请叫我吉先生 | 来源:发表于2020-12-22 15:06 被阅读0次

    路由跳转

    地址栏显示参数,且页面刷新后参数不会消失.
    跳转:

    this.$router.push({
      name:'Home',
      query:{
        id,
        region
      }
    })
    

    获取参数

    this.$route.query
    

    需要注意的是,路由跳转用 $router,获取地址栏信息用 $route

    正文

    首页点击按钮路由跳转至A页面,A页面返回至首页后,再进入A页面发现$bus.$on事件执行了两次,而且每进一次就多执行一次.

    触发事件

      this.$bus.$emit("eventA", {
        paramA: 123
      });
    

    监听事件

        this.$bus.$on("eventA", (e) => {
          console.log(e.paramA);
        });
    

    解决方法
    可以在子组件被销毁前解除绑定

      beforeDestroy() {
        this.$bus.$off('eventA');
      }
    

    相关文章

      网友评论

          本文标题:Vue路由跳转后this.$bus.$on多次触发的问题

          本文链接:https://www.haomeiwen.com/subject/bbrsnktx.html