router-view跳转成功后，怎样自动触发事件改变父组件上的内容？

Question

父组件如下，一个<header>和一个<router-view>，我想做的是当router-view切换成功后自动触发changeTitle()改变<header>中的title值。

<template>
  <div id="app">
    <header>
      <i class="icon-back" v-on:click="backwards"></i>
      {{title}}
    </header>
    <transition :name="transitionName">
      <router-view class="view" v-on:viewIn="changeTitle"></router-view>
    </transition>
  </div>
</template>

子组件中定义了一个方法

methods: {
  viewIn: function(){
    this.$emit('viewIn',"首页")
  }
}

如何在自动触发viewIn这个方法，而不是通过人为的click去触发？

解决了

created (){
      this.$emit('viewIn',"投注站");
    },
    

路由实例创建完成后自动执行。

Answer 1

view-router有提供路由切换的钩子函数，你可以在这个里面添加逻辑来发送事件通知需要组件
（详见http://router.vuejs.org/zh-cn...）

Answer 2

试一下路由的组件里使用$dispatch()传递一个参数来告诉父组件，里面的路由组件切换完成，父组件再用events接收一下$dispatch()的响应事件，然后再执行你那个函数就可以了

Answer 3

用vuex，直接绑定vuex store的值，在router的afterEach钩子进行store的值修改。

Answer 4

解决了

created (){
      this.$emit('viewIn',"投注站");
    },
    

路由实例创建完成后自动执行。