javascript - Vue用<router-view>渲染出来的组件互相之间如何通讯？

问题描述

问 题

初学Vue，有些地方不太懂。
<router-view>放在了App.vue里，如果想让<router-view>渲染出的组件，像是login和main通讯，应该怎么写呢？在login.vue里点击了按钮，从后台获取用户的信息，再跳转到main，把用户的信息再main.vue里显示出来，用户的信息要如何从login.vue传递到main.vue?
App.vue里的代码：

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</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>
  <div>
    <router-link to="/mainPage">
          <button @click="login">
            登录
          </button>
        </router-link>
  </div>
</template>

解决方案

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

这篇关于javascript - Vue用&lt;router-view&gt;渲染出来的组件互相之间如何通讯？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！