javascript - Bagaimanakah komponen yang diberikan oleh Vue menggunakan <router-view> berkomunikasi antara satu sama lain?

Question

Saya baru menggunakan Vue dan saya tidak faham beberapa perkara.
<router-view> diletakkan dalam App.vue. Jika anda mahu komponen yang dipaparkan oleh <router-view> Selepas mengklik butang dalam login.vue, maklumat pengguna diperoleh dari latar belakang, kemudian melompat ke utama, dan maklumat pengguna dipaparkan dalam main.vue Bagaimana untuk memindahkan maklumat pengguna dari login.vue ke main.vue?
Kod dalam App.vue:

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

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

kod login.vue:

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

Answer 1

1. Gunakan localStorage/sessionStorage pelayar, dsb.
2 Gunakan vuex untuk berkongsi data
Buat userInfo.js, dan keadaan di dalamnya ialah maklumat pengguna. Selepas log masuk, simpan maklumat pengguna dalam keadaan info pengguna, dan kemudian dapatkannya dalam main