Vue2: 루트를 사용하여 다른 페이지로 리다이렉트하는 방법

Vue2: 루트를 사용하여 다른 페이지로 리다이렉트하는 방법

스크립트 코드에서 다른 vue 페이지로 리디렉션하려면 어떻게 해야 합니까?router.push()를 사용하고 있는데 원하는 vue 페이지로 리다이렉트 할 수 없습니다.

다음은 제 소스 코드입니다.

src/srec/index.displacy

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.표시하다

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

이 코드를 실행한 후 다음과 같은 오류가 나타납니다.

ReferenceError: 라우터가 eval에서 정의되어 있지 않습니다.

src/main.disples

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

또한 브라우저 http://localhost:8080/#/homepage에서 동일한 링크에 액세스할 수 있습니다.그러나 내 스크립트 코드에서 리다이렉트할 수 없습니다.

Vue 및 VueRouter를 Import한 후 콜합니다.

    Vue.use(VueRouter)

당신의 방식대로라면

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

편집

Vue 라우터와 Vue 라우터를 코드로 사용하려면 양쪽을 Import해야 합니다.따라서 라우터가 eval에서 정의되어 있지 않습니다.또,

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

이것을 src/components/IndexPage에서 시도해 보십시오.표시하다

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

컴포넌트 인스턴스 속성을 사용하여 라우터에 액세스합니다.

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

앱에 있어요?

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

피드백 친구에 대한 Thanx.vue에서 라우터 파일을 Import하지 않았습니다.업데이트된 코드 행은 다음과 같습니다.

src/components/IndexPage.표시하다

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

다음 코드를 사용해 볼 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/51281157/vue2-how-to-redirect-to-another-page-using-routes