vue-material 中的 vue.js 2 路由

Question

我目前正在开发一个使用vue.js 和vue-material 的网页。我做了一个类似的菜单，比如this。

我的目标是，其中一个菜单项将用户重定向到另一个页面。 我试过 official doc 说：

  <md-list-item @click="$refs.sidebar.toggle(); this.$router.push('/company');">
    <md-icon>start</md-icon> <span>Starred</span>
  </md-list-item>

但我收到了一条 vue-warn 消息：

[Vue warn]: Error in event handler for "click": "TypeError: this.$router is undefined"

我尝试了所有版本：$router.push('/company');,router.push('/company');,this.router.push('/company'); 但还是不行。

另一方面，我尝试用router-link 标签包围md-list-item，但效果不佳。

如何定义内联路由（在@click 部分）？

感谢提前回复！

更新：

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

Answer 1

您的路由器配置似乎没问题。这里的问题是你的@click中的this.，没有必要（你已经使用$refs而没有this：P）。

<md-list-item @click="$refs.sidebar.toggle(); $router.push('/company');">
    <md-icon>start</md-icon> 
    <span>Starred</span>
</md-list-item>

jsfiddle

Answer 2

如下图这样会更简单更干净::

<md-list-item to="/company">
   <md-icon>start</md-icon> 
   <span>Starred</span>
</md-list-item>