Vue2: How to redirect to another page using routes

2
votes

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.

4
javascriptvue.jsvuejs2vue-componentvue-router
did you import the router.js file into your main.js? – Ru Chern Chong
Yes I've imported that. – Zain SMJ
You may use instance method like this.$router.push({name: 'HomePage'}) ? – Makarov Sergey
did you add the router option in your root vue instance in main.js file? – Vamsi Krishna
@RuChernChong you were right somehow. I imported src/router/index.js file into my src/components/HomePage.vue and it worked. – Zain SMJ

4 Answers

4
votes

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>
2
votes

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>
1
votes

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')
0
votes

You can try the following code:

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