3

我目前正在开发一个使用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 消息：

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

我尝试了所有版本：$router.push('/company');, router.push('/company');，this.router.push('/company');但仍然无法正常工作。

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

如何定义路由内联（在该@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

4

2 回答 2

3

您的路由器配置似乎没问题。这里的问题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

于 2017-08-30T19:37:38.110 回答
0

它会更容易和更清洁，如下所示：

<md-list-item to="/company">
   <md-icon>start</md-icon> 
   <span>Starred</span>
</md-list-item>
于 2020-11-03T18:28:33.540 回答