Vue.js, 다른 경로의 컴포넌트에 데이터 전달

Vue.js, 다른 경로의 컴포넌트에 데이터 전달

데이터를 한 페이지에서 다른 페이지로 전달하는 간단한 작업으로 인해 Vue.js의 초보자에게 큰 골칫거리가 되었습니다.여기는 제 라우터입니다.

API 요청을 하는 "/" 페이지에 폼을 렌더링하고 있습니다.

다른 컴포넌트가 있는 다른 루트 페이지에 데이터를 전달하고 싶다.

Vue에서 하는 게 그렇게 어렵나요?오늘은 정말 머리가 아팠어요.API에서 데이터를 가져와 저장하고 다른 컴포넌트로 전송합니다.어떻게 해야 하죠?

안토니우스가 말했듯이, 이미 소품들을 활성화 시켰으니router/index.js파라미터는 에서 전달할 수 있습니다.router.push다음과 같습니다.

router.push({
    name: 'events',
    params: {
        items: data
    }
});

그러면 당신은 그것을 받을 수 있을 것이다.items의 소품으로서EventsDisplay.vue

export default {
    name: 'eventsDisplay',
    props: ['items'],
};

글로벌하게 저장할 경우 이벤트버스 또는 VueX 스토어를 사용하여 저장하고 액세스해야 할 경우 이 이벤트버스 또는 스토어에서 저장하여 로드할 수 있습니다.

이러한 2개의 컴포넌트 간에만 전달하고 첫 번째 컴포넌트에서두 번째 페이지에 접속하는 경우에만 route 인수에 속성을 전달할 수 있습니다.https://router.vuejs.org/en/essentials/passing-props.html

Vuex 사용 시도

소스 컴포넌트 내

this.$store.commit('changeDataState', this.$data);
this.$router.push({name: 'user-post-create'});

수신처 컴포넌트

created () {
    console.log('state', this.$store);
    this.$store.getters.Data;
}

vue 라우터에 진정한 소품 추가

{
    path: "/pay-now",
    name: "pay",
    props: true,
    component: () =>
      import(/* webpackChunkName: "about" */ "../components/account/pay.vue"),
    beforeEnter: AuthGuard,
  },

그런 다음 라우터로 소품을 통과시킨다.

        this.$router.push({ 
        name: "pay",
        params: {
        result:this.result,
      }
      });

언급URL : https://stackoverflow.com/questions/45484684/vue-js-pass-data-to-component-on-another-route