在vue的cli脚手架中同级页面bus传递参数，为啥数据不会更新....

Question

跳转前的页面代码

<template>
    <div>
        <button @click="sendMsg">send</button>
    </div>
</template>

<script>
export default {
    name:"demo",
    data: function () {
        return {
            content: "Yin Han"
        } 
    },
    methods: {
        sendMsg: function(){
            this.bus.$emit('msg',"sssss")
            this.$router.push('/Demo1')
        }
    }
}
</script>

跳转后的页面代码

<template>
    <div>
        <button>{{getMsg}}</button>
        <button @click="back">back</button>
    </div>
</template>

<script>
export default {
    name: "demo1",
    data: function(){
        return {
            getMsg: "123"
        }
    },
    methods: {
        back: function(){
            this.$router.push('/')
        }
    },
    mounted: function(){
        this.bus.$on('msg',function(msg){
            this.getMsg = msg;
            this.bus.$off('msg')
        })
    }
}
</script>

所想的应该在A页面点击send之后会跳转B然后B通过BUS拿到值更新了getMsg，但是实际操作过程并没有，并且，在第一次点send时候$on没有触发，第二次之后才会触发，参考了Vue中同级组件使用bus传值如何优雅地完成？但是并没有给到有效的解决。

Answer 1

第一次：前者触发的时候，后者的生命周期都还没开始，emit的事件没有被接收。
第二次：后者的生命周期已经开始了，在mounted中注册了事件监听，且还没有被emit，这个监听未销毁。然后前者再一次emit的时候，这个监听就起了作用，所以才会觉得是第二次后才触发。

Answer 2

监听在前，触发在后；然而你却正好相反

Answer 3

这就像你在晚上说今天早上我要干什么，而早上的你并不知道要干这件事。