javascript - Vue用<router-view>渲染出來的元件互相之間如何通訊？

Question

初學Vue，有些地方不太懂。
<router-view>放在了App.vue裡，如果想讓<router-view>渲染出的元件，像是login和main通訊，該怎麼寫呢？在login.vue裡點擊了按鈕，從後台獲取用戶的信息，再跳到main，把用戶的信息再main.vue裡顯示出來，用戶的信息要如何從login.vue傳遞到main.vue?
App.vue裡的程式碼：

<code><template>
  <p id="app">
      <router-view></router-view>
  </p>
</template>
<script></code>

vue-router的設定：

<code>import Vue from 'vue'
import Router from 'vue-router'
import main from '@/components/main'
import login from '@/components/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/main',
      name: 'main',
      component: main
    },
    {
      path: '*',
      name: 'login',
      component: login
    }
  ]
})</code>

login.vue的程式碼：

<code><template>
  <p>
    <router-link to="/mainPage">
          <button @click="login">
            登录
          </button>
        </router-link>
  </p>
</template></code>

Answer 1

1,使用瀏覽器的localStorage/sessionStorage等
2,用vuex來共享資料
建立一個userInfo.js，裡面的state為使用者資訊。在登入之後將使用者資訊存在userInfo的state裡面，然後在main裡面就能取得到了