javascript - <router-view>를 사용하여 Vue에서 렌더링된 구성 요소는 어떻게 서로 통신합니까?

Question

저는 Vue를 처음 접해서 일부 부분을 이해하지 못합니다.
<router-view>가 App.vue에 배치됩니다. <router-view>가 로그인 및 메인과 통신하도록 하려면 어떻게 작성해야 할까요? login.vue에서 버튼을 클릭하면 백그라운드에서 사용자 정보를 가져온 다음 메인으로 이동하고 사용자 정보가 main.vue에 표시됩니다. login.vue에서 main.vue로 사용자 정보를 전송하는 방법은 무엇입니까?
App.vue의 코드:

으아악

vue 라우터 설정:

으아악

login.vue 코드:

으아악

Answer 1

1. 브라우저의 localStorage/sessionStorage 등을 사용합니다.
2. vuex를 사용하여 데이터를 공유합니다.
userInfo.js를 생성하고 그 안의 상태는 사용자 정보입니다. 로그인 후 userInfo 상태에서 사용자 정보를 저장한 후 main에서 가져옵니다