Vue Невозможно перейти на другую страницу из компонента

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>