$ router.push不起作用

Question

因此，我将iviewui与vuejs一起用于小proyect。到目前为止，一切都很好。不幸的是，我对$router.push()有一些问题。

单击卡时，我想推到新的URL。这是我的代码：

<Card :bordered="true" @click="$router.push('/my/cool/link')">
  <p slot="title">Card Title</p>
  <p>Card description</p>
</Card>

因此，问题是当我单击卡片什么都没发生时，这是与Vuejs一起工作时第一次发生这种情况。有人知道为什么会发生这种情况吗？任何帮助都非常感谢。

Answer 1

我最终在Card组件上使用@click.native="$router.push('/my/cool/link')"。

Answer 2

<card :bordered="true" @click="handleClick">
  <p slot="title">Card Title</p>
  <p>Card description</p>
</Card>

---

export default {
  // Whatever you got here
  methods: {
    handleClick() {
      this.$router.push('/my/cool/link')
    }
}

路线

export default new VueRouter({
  routes: [
    { path: '/my/cool/link' }
  ]
})

随意根据您的喜好重命名方法。

Answer 3

<card :bordered="true" @click="handleClick">
methods: {
    handleClick() {
      this.$router.push('/my/cool/link')
    }

或

<v-btn to="/my/cool/link">Next Page</v-btn>

Answer 4

实际上，您可以使用以下代码进行NUXTJS中的更改路由。

this.$router.push("/");
or
this.$router.push({ path: '/'} );

假设，如果您现在正在查看此链接" http：//localhost：3000"或＆＆＆quot http：//192.168.0.102：300＆quot;并尝试通过按下使用给定代码路由"/quot"来更改路线。因此它将无法正常工作。因为，您已经在查看此路线了。因此，nuxtjs路线无法改变。

用于处理这种情况，您可以在方法中使用以下技术/代码：

vuejs way：

if($route.path == '/') {
   //following 2 line code are sample code here put your need codes
   this.isLogin = false;
   this.user_full_name = 'My Account';
} else {
   // this.$router.push("/");
   this.$router.push({ path: '/'} );
}

======================================== p> nuxtjs方法：

if($nuxt.$route.path == '/') {
   //following 2 line code are sample code here put your need codes
   this.isLogin = false;
   this.user_full_name = 'My Account';
} else {
   // this.$router.push("/");
   this.$router.push({ path: '/'} );
}