title: Vue2: How to redirect to another page using routes
body: <p>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.</p>
  
  <p>Following is my source code.</p>
  
  <p><strong>src/router/index.js</strong></p>
  
  <pre><code>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
      }
    ]
  })
  </code></pre>
  
  <p><strong>src/components/IndexPage.vue</strong></p>
  
  <pre><code>&lt;script&gt;
    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');
           }
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>After running this code I am getting error which states:</p>
  
  <blockquote>
    <p>ReferenceError: router is not defined at eval</p>
  </blockquote>
  
  <p><strong>src/main.js</strong></p>
  
  <pre><code>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: '&lt;App/&gt;'
  })
  </code></pre>
  
  <p>Furthermore, I can access that same link from browser <a href="http://localhost:8080/#/homepage" rel="nofollow noreferrer">http://localhost:8080/#/homepage</a>. But cannot redirect to it from my script code.</p>