@click不会在vue.js的标题链接上触发

Question

我想将标头文本更改为我所在的当前路由名称。它仅适用于组件安装，并且不会在单击时触发。如何从路由器创建的按钮单击中获取changeHeaderTitle？

 <template>
  <div>
    <nav class="navigation--navbar">
      <router-link
        class="navigation--links"
        v-for="routes in links"
        v-bind:key="routes.id"
        @click='changeHeaderTitle'
        :to="`${routes.page}`"
      >{{routes.text}}</router-link>
    </nav>
    <div class="header--headline">
      <h2 class="header--headline-text">{{headerTitle}}</h2>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data () {
    return {
      headerTitle: 'Boop',
      links: [
        {
          id: 0,
          text: 'Home',
          page: '/Home'
        },
        {
          id: 1,
          text: 'Tutoring',
          page: '/Tutoring'
        }
      ]
    }
  },
  methods: {
    changeHeaderTitle: function () {
      if (this.$route.path === '/') {
        this.headerTitle = 'Home Header Here'
      } else {
        let routeName = this.$route.path.split('/')
        this.headerTitle = routeName[1]
      }
    }
  },
  mounted: function () {
    this.changeHeaderTitle()
  }
}
</script>

Answer 1

看起来你需要添加.native修饰符。做：

    <router-link
      class="navigation--links"
      v-for="routes in links"
      v-bind:key="routes.id"
      @click.native='changeHeaderTitle'
      :to="`${routes.page}`"
    >
      {{routes.text}}
    </router-link>