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 '@/ponents/HomePage'

Vue.use(Router)

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

src/ponents/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,
  ponents: { 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.

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 '@/ponents/HomePage'

Vue.use(Router)

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

src/ponents/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,
  ponents: { 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.

• javascript
• vue.js
• vuejs2
• vue-ponent
• vue-router

• did you import the router.js file into your main.js? – Ru Chern Chong Commented Jul 11, 2018 at 8:54
• Yes I've imported that. – Zain SMJ Commented Jul 11, 2018 at 8:56
• You may use instance method like this.$router.push({name: 'HomePage'}) ? – Makarov Sergey Commented Jul 11, 2018 at 8:57
• did you add the router option in your root vue instance in main.js file? – Vamsi Krishna Commented Jul 11, 2018 at 9:13
• @RuChernChong you were right somehow. I imported src/router/index.js file into my src/ponents/HomePage.vue and it worked. – Zain SMJ Commented Jul 11, 2018 at 13:02

4 Answers 4

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/ponents/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>

Use your ponent 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')

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

src/ponents/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>

You can try the following code:

function redirect(page) {
  window.location.href = page;
}