vue 中 eventbus 的問題

vue 項(xiàng)目有兩個(gè)組件：hello 組件、apple 組件，這兩個(gè)組件是兄弟組件，想實(shí)現(xiàn)的效果是 hello 組件里的數(shù) num 隨機(jī)增加之后，apple 組件的 num 也共享這個(gè)狀態(tài)，同時(shí)增加。

所以，在全局寫了一個(gè) eventbus，然后在 hello 組件里點(diǎn)擊增加按鈕的時(shí)候會(huì)發(fā)送一個(gè) ‘a(chǎn)dd’ 事件，把這個(gè) num 發(fā)送出去，然后在 apple 組件監(jiān)聽這個(gè) ‘a(chǎn)dd’ 事件。

寫完之后，在 hello 組件里面引入 apple 組件，然后注冊(cè)，然后寫在 template 里，打開瀏覽器，訪問 hello 組件，點(diǎn)擊增加按鈕，apple 組件會(huì)同時(shí)更新狀態(tài)，沒有問題。

現(xiàn)在問題來了，我先在 hello 組件點(diǎn)擊增加按鈕，發(fā)送 ‘a(chǎn)dd’ 之后，然后跳轉(zhuǎn)到 apple 組件頁面，發(fā)現(xiàn) num 沒有變，這是為什么？這應(yīng)該不是跨域問題把？

hello 組件代碼：

<template>
  <div>
    <h1>hello組件</h1> {{ num }}
    <button @click="handleAdd">隨機(jī)增加</button>
    <router-link to="/apple">to apple</router-link>
    <Apple></Apple>
  </div>
</template>
<script>
import Apple from './Apple'
export default {
  components: { Apple },
  data () {
    return { num: 0 }
  },
  methods: {
    handleAdd () {
      this.num = Math.floor(Math.random() * 100 + 1)
      this.$bus.emit('add', this.num)
    }
  }
}
</script>

apple 組件代碼：

<template>
  <div>
    <h1>apple組件</h1> {{ num }}
  </div>
</template>

<script>
export default {
  data () {
    return { num: 0 }
  },
  created () {
    this.$bus.on('add', val => {this.num = val})
  }
}
</script>

bus 代碼：

const install = function (Vue) {
  const Bus = new Vue({
    methods: {
      emit (event, ...args) {
        this.$emit(event, ...args)
      },
      on (event, callback) {
        this.$on(event, callback)
      },
      off (event, callback) {
        this.$off(event, callback)
      }
    }
  })
  Vue.prototype.$bus = Bus
}

export default install