Javascript Vue2：如何使用路由重定向到另一个页面

如何从脚本代码重定向到另一个vue页面。我正在使用router.push（），但无法重定向到所需的vue页面

下面是我的源代码

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
    }
  ]
})

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/>'
})

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>

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

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

从“vue路由器”导入VueRouter
导出默认值{
名称：“IndexPage”，
方法：{
redirectUser（）{//单击按钮时调用此方法
如果（1==1）
{
router.push（'/homepage'）；
//这个.$router.push（'/homepage'）；
}
}
}
}

运行此代码后，我得到一个错误，该错误表示：

ReferenceError:评估时未定义路由器

src/main.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
    }
  ]
})

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/>'
})

从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
Vue.config.productionTip=false
window.Vue=Vue
新Vue({
el:“#应用程序”，
路由器，
组件：{App}，
模板：“。但无法从脚本代码重定向到它。
使用组件实例属性访问路由器：

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

你的应用程序中有吗

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

您可以尝试以下代码：

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

导入Vue和VueRouter
然后打电话

    Vue.use(VueRouter)

那么在你的方法上,

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

编辑

如果您想在代码中使用Vue和Vue路由器，您需要同时导入它们，这就是为什么在eval中没有定义路由器的原因。
并且还使用

this.$router.push('/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>

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

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


从“Vue”导入Vue
从“vue路由器”导入VueRouter
Vue.use（VueRouter）
导出默认值{
名称：“IndexPage”，
方法：{
redirectUser（）{//单击按钮时调用此方法
如果（1==1）
{
这个.$router.push（'/homepage'）；
}
}
}
}
谢谢反馈朋友。我没有在vue上导入路由器文件。更新的代码行是：

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>

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

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


从“../router/index.js”导入路由器//刚刚添加了这一行，代码运行正常！！
导出默认值{
名称：“IndexPage”，
方法：{
redirectUser（）{//单击按钮时调用此方法
如果（1==1）
{
router.push（{name:'HomePage'}）
}
}
}
}
您是否已将
router.js
文件导入您的
main.js
？是的，我已导入该文件。您可以像这样使用实例方法。$router.push（{name:'HomePage'}）？您是否在main.js文件的根vue实例中添加了
router
选项？@RuChernChong您说得对。我将src/router/index.js文件导入到我的src/components/HomePage.vue中，它起了作用。此解决方案也出现了几乎相同的错误。>TypeError:无法读取未定义的属性“$router”eval@ZainSMJ你需要进去将你的路由器也包括在主应用程序中。我已经编辑了我的问题。请查看我的main.js文件并引导我完成。@ZainSMJ我看不到你的代码，你可以在这里玩，并尝试了解出了什么问题。我想你在我回答问题之前回答了自己的问题：D