vue.js 2在vue-material中路由(vue.js 2 routing in vue-material)

 我目前正在开发一个将vue.js与vue-material一起使用的网页。 我做了类似这样的菜单。 
 
 我的目标是，其中一个菜单项将用户重定向到另一个页面。 我试着作为官方文件说： 
 
  <md-list-item @click="$refs.sidebar.toggle(); this.$router.push('/company');">
    <md-icon>start</md-icon> <span>Starred</span>
  </md-list-item>
 
 但我收到了一条警告： 
 
[Vue warn]: Error in event handler for "click": "TypeError: this.$router is undefined"
 
 我尝试了所有版本： $router.push('/company'); ， router.push('/company'); ， this.router.push('/company'); 但是stil不起作用。 
 
 另一方面，我试图用router-link标签包围md-list-item ，但它也没有用。 
 
 如何定义内联路由（在@click部分）？ 
 
 Thx提前回复！ 
 
 更新： 
 
 我在app.js vue-route配置： 
 
import VueRouter from 'vue-router'
Vue.use(VueRouter)
...
const routes = [];

const router = new VueRouter({
  routes
})


const app = new Vue({
    el: '#app',
    beforeUpdate: function() {
      console.debug('app rerendering');
      console.debug(this);
    },
    beforeCreate: function() {
      console.debug('app creating');
      console.debug(this);
    },
    router,
});
 
 但问题是一样的...如果我试着打电话给这个。 $router.push('/company')我得到了同样的错误： TypeError: this.$router is undefined 

I'm currently working on a web page what uses vue.js with vue-material. I made a similar menu like this. 
 
My goal, that one of the menu item redirect the user to an another page. I tried as a official doc says:
 
  <md-list-item @click="$refs.sidebar.toggle(); this.$router.push('/company');">
    <md-icon>start</md-icon> <span>Starred</span>
  </md-list-item>
 
But I got a vue-warn message:
 
[Vue warn]: Error in event handler for "click": "TypeError: this.$router is undefined"
 
I tried the all version: $router.push('/company');,router.push('/company');,this.router.push('/company'); but stil does not works.
 
On the other hand i tried to surround the md-list-item with router-link tag but it didnt work as well.
 
How can I define the routing inline (in the @click section)?
 
Thx for the responses in advance!
 
UPDATE:
 
My vue-route config in app.js:
 
import VueRouter from 'vue-router'
Vue.use(VueRouter)
...
const routes = [];

const router = new VueRouter({
  routes
})


const app = new Vue({
    el: '#app',
    beforeUpdate: function() {
      console.debug('app rerendering');
      console.debug(this);
    },
    beforeCreate: function() {
      console.debug('app creating');
      console.debug(this);
    },
    router,
});
 
But the problem is the same... If I try to call this.$router.push('/company') I got a same error: TypeError: this.$router is undefined

原文：https://stackoverflow.com/questions/45945593