javascript - How do components rendered by Vue using <router-view> communicate with each other?

Question

I’m new to Vue and I don’t understand some things.
<router-view> is placed in App.vue. If you want the components rendered by <router-view> to communicate with login and main, how should you write it? When a button is clicked in login.vue, the user's information is obtained from the background, then jumps to main, and the user's information is displayed in main.vue. How to pass the user's information from login.vue to main.vue?
Code in App.vue:

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

vue-router settings:

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. Use localStorage/sessionStorage of the browser, etc.
2. Use vuex to share data
Create a userInfo.js, and the state inside is user information. After logging in, store the user information in the state of userInfo, and then get it in main