Vue2: How to redirect to another page using routes

Question

How can I redirect to another vue page from my script code. I am using router.push() but cannot redirect to my desired vue page.

Following is my source code.

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HomePage from '@/components/HomePage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'IndexPage',
      component: IndexPage
    },
    {
      path: '/homepage',
      name: 'HomePage',
      component: HomePage
    }
  ]
})

src/components/IndexPage.vue

<script>
  import VueRouter from 'vue-router'

  export default {
    name: 'IndexPage',
    methods: {
      redirectUser() { // this method is called on button click
         if (1 == 1)
         {
            router.push('/homepage');
            //this.$router.push('/homepage');
         }
      }
    }
  }
</script>

After running this code I am getting error which states:

ReferenceError: router is not defined at eval

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

window.Vue = Vue

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Furthermore, I can access that same link from browser http://localhost:8080/#/homepage. But cannot redirect to it from my script code.

Solution 1

Thanx for the feedback friends. I was not importing my router file on my vue. The updated line of code is:

src/components/IndexPage.vue

<script>
  import router from '../router/index.js'  // Just added this line and code works !!

  export default {
    name: 'IndexPage',
    methods: {
      redirectUser() { // this method is called on button click
         if (1 == 1)
         {
            router.push({name: 'HomePage'})
         }
      }
    }
  }
</script>

Solution 2

import Vue and VueRouter and then call

    Vue.use(VueRouter)

then in your method,

    this.$router.push({name: 'HomePage'}) 

EDIT

You need to import both Vue and Vue Router if you want to use it in your code, that's why you are getting router is not defined at eval. And also use

this.$router.push('/homepage');

Try this in your src/components/IndexPage.vue

<script>
  import Vue from 'vue'
  import VueRouter from 'vue-router'

  Vue.use(VueRouter)

  export default {
    name: 'IndexPage',
    methods: {
      redirectUser() { // this method is called on button click
        if (1 == 1)
        {
           this.$router.push('/homepage');
        }
      }
    }
  }
</script>

Solution 3

Use your component instance property to access the router:

this.$router.push({name: 'HomePage'}) 

And do you have it in your app?

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Comments

[Zain SMJ]

Getting almost same error for this solution also. > TypeError: Cannot read property '$router' of undefined at eval

[Makarov Sergey]

@ZainSMJ You need to include your router to the main app as well.

[Zain SMJ]

I have edited my question. Please review my main.js file and guide me through.

[Makarov Sergey]

@ZainSMJ I don't see your code, you may play here jsfiddle.net/q9bjx5os and try to understand what's wrong.

[Ru Chern Chong]

I guess you answered your own question before I could :D