Question

因此，我将iViewUI与VueJS一起用于小型项目。到目前为止一切都很顺利。不幸的是，$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

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

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')
    }
}

route.js

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”或“http://192.168.0.102:300”并尝试通过使用给定代码推送“/”来更改路由。所以它不会工作。因为，您已经查看了这条路线。所以，Nuxtjs 路由不能改变。

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

vuejs 方式：

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: '/'} );
}

==============================================

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: '/'} );
}

$ router.push不工作？

4 个答案:

route.js