javascript - Wie kommunizieren Komponenten, die von Vue mithilfe von <router-view> gerendert wurden, miteinander?

Question

Ich bin neu bei Vue und verstehe einige Dinge nicht.
<router-view> wird in App.vue platziert, wenn Sie möchten, dass die von <router-view> gerenderten Komponenten mit login und main kommunizieren. Nach dem Klicken auf die Schaltfläche in login.vue werden die Benutzerinformationen aus dem Hintergrund abgerufen, dann zu main gesprungen und die Benutzerinformationen in main.vue angezeigt. Wie werden die Benutzerinformationen von login.vue nach main.vue übertragen?
Code in App.vue:

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

vue-Router-Einstellungen:

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

login.vue-Code:

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

Answer 1

1,使用浏览器的localStorage/sessionStorage等
2,用vuex来共享数据
建立一个userInfo.js，里面的state为用户信息。在登录之后将用户信息存在userInfo的state里面，然后在main里面就能获取到了