javascript - Comment les composants rendus par Vue à l'aide de <router-view> communiquent-ils entre eux ?

Question

Je suis nouveau sur Vue et je ne comprends pas certaines choses.
<router-view> est placé dans App.vue Si vous souhaitez que les composants rendus par <router-view> communiquent avec login et main, comment devez-vous l'écrire ? Après avoir cliqué sur le bouton dans login.vue, les informations de l'utilisateur sont obtenues à partir de l'arrière-plan, puis passent à main et les informations de l'utilisateur sont affichées dans main.vue. Comment transférer les informations de l'utilisateur de login.vue vers main.vue ?
. Code dans App.vue :

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

Paramètres vue-routeur :

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 :

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

Answer 1

1. Utilisez localStorage/sessionStorage du navigateur, etc.
2. Utilisez vuex pour partager des données
Créez un userInfo.js, et l'état à l'intérieur est constitué d'informations utilisateur. Après vous être connecté, stockez les informations utilisateur dans l'état userInfo, puis récupérez-les dans main