Vue Router工作在大多数组件而不是工具栏

Question

我正在使用Vue和Vue Material。这是我的应用程序的结构。

<template>
  <div id="app">
    <div id="toolbar">
      <md-toolbar>
        <h1 class="md-title">OATS</h1>
      </md-toolbar>
    </div>
    <router-view/>
  </div>
</template>

使用此。$ router.push适用于我的所有视图，这些视图是路由的结果。但是，我想在工具栏中有一个注销按钮，因此有一个功能

<script>
export default {
  name: 'toolbar',
  methods: {
    logout: function () {
      this.$http.get('http://localhost:8081/api/logout').then(function (res) {
        this.$store.commit('updateUser', '')
        this.$router.push('/login/')
      }).bind(this)
    }
  }
}
</script>

在我的Toolbar.vue中。当它到达router.push时，它给了我一个。$ router是未定义的错误。我错过了什么？谢谢。