Page code before jump
<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>Page code after jump
<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>what you want is to jump to B after clicking send on page A, and then B updates getMsg, through BUS, but the actual operation does not happen, and $on is not triggered the first time you click send, but it will not be triggered until the second time. Refer to how the peer components in Vue use bus to pass values elegantly? but it has not been effectively solved.