Vue Unable to push to another page from component - vue.js

Question

I am trying to push from one component to another using vue routes but am having issues!
This is my router->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'
})
Now, from my helloworld component I am trying to do this:
<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>
When doing so I get this error:
Uncaught TypeError: Cannot read property 'push' of undefined
at eval (HelloWorld.vue?18db:17)
Not sure what I am doing wrong and hoping for help :-)
Thanks in advance.

Answer 1

you need to write this this.$router.push({ path: '/groupstart' }) inside some hook or method. if you want to do it right away when page is loaded, you can do something like this
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'This is the startpage'
}
},
mounted () {
this.$router.push({ path: '/groupstart' })
}
}
</script>