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里的代码：

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

vue-router的设置：

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的代码：

<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里面就能获取到了