Question

我正在尝试使用vue路线将一个组件推向另一个组件，但是出现问题！

这是我的路由器-> index.js：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/pages/HelloWorld'
import GroupStart from '@/pages/GroupStart'
import NotFound from '@/pages/NotFound'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/groupstart',
            name: 'GroupStart',
            component: GroupStart
        },
        {
            path: '*',
            name: 'Notfound',
            component: NotFound
        }
    ],
    mode: 'history'
})

现在，我正在从helloworld组件中尝试执行此操作：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'This is the startpage'
    }
  }
}

this.$router.push({ path: '/groupstart' })
</script>

这样做时，我会收到此错误：

Uncaught TypeError: Cannot read property 'push' of undefined
    at eval (HelloWorld.vue?18db:17)

不确定我做错了什么，希望得到帮助：-）

谢谢。

Answer 1

您需要在某个挂钩或方法中编写此this.$router.push({ path: '/groupstart' })。如果您想在页面加载后立即执行此操作，则可以执行以下操作

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'This is the startpage'
    }
  },
  mounted () {
   this.$router.push({ path: '/groupstart' })
  }
}

</script>

Vue无法从组件推送到另一页

1 个答案: