vue.js vue中的2个路由-material

Question

我目前正在开发一个使用 vue.js with vue-material. I made a similar menu like 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 部分）？

感谢提前回复！

更新：

我的 vue-route 配置 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,
});

但问题是一样的...如果我尝试调用它。$router.push('/company')我得到了同样的错误：TypeError: this.$router is undefined

Answer 1

您的路由器配置似乎没问题。这里的问题是 this. 在你的 @click 中，没有必要（你已经使用 $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>

vue.js vue中的2个路由-material

vue.js 2 routing in vue-material

javascript

routing

vue.js

vuejs2

vue-material