美文网首页
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