Vue 2.0 实例听不到 vue-router 组件发出的事件

Question

I am using Vue 2.0-rc.6 (latest at the moment) and Vue-router 2.0-rc.5 (latest at the moment).

I tried to do this.$emit('custom-event') in one of my router components, and this.$on('custom-event', () => { console.log('I heard an event') }) in my Vue instance but the event was not being listened. The router component itself was hearing the event but not the Vue instance.

Any idea?

Check out this jsfiddle .

Answer 1

An event from $emit is not propagated to the parent instance. The parent has to listen for it on the component in the template actively.

<router-view @eventname="callbackMethod" />

Answer 2

Thanks to LinusBorg in http://forum.vuejs.org/topic/5235/vue-2-0-instance-is-not-hearing-events-emitted-by-vue-router-components/2 for pointing out that an event from $emit is not propagated to the parent instance.

I didn't make it work though by using the suggested solution by LinusBorg. Instead, I made it working by doing this.$router.app.$emit('eventname')

Answer 3

using watcher we can achieve the same thing, Mean when my routes are updated then we can catch an event through watcher.

    watch: {
        '$route': function(to, from) {
              console.log('To :', to.path); // current route
              console.log('from:', from.path); // old route
         }
    }