登录、注册、注销后页面跳转

Avatar获取用户信息未登录访问登录页以外的页面跳转到登录页面

Vue 生命周期

所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。

Avatar 组件展示用户信息

组件间事件传递

问题：有一个bug，当输入用户名和密码，进入主页面，但信息没有在主页面显示，还是显示未登录。

只有用户刷新页面，才显示登录用户的头像。

Avatar.vue 与Login.vue既不是父子组件，又不是相邻组件，如何传递

Vue-Api

vm.$on( event, callback )

vm.$on监听当前实例上的自定义事件

事件可以由 vm.$emit 触发

vm.$on('test', function (msg) { 
console.log(msg)
}) 
vm.$emit('test', 'hi')
// => "hi"

vm.$once( event, callback

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

vm.$off( [event, callback] )

移除自定义事件监听器。

如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。

未登录调整到登录页面

实例生命周期钩子

如何进行不同组件间事件传递？

通过vm. $on(name,data=>{})绑定事件，后通过vm.$ emit(name,data)触发事件并传递数据

课程中，通过new一个Vue实例，然后在两个组建中引入，然后分别在Login组件 $emit将user信息传入，并在Avatar组件中通过$ on获取并处理user信息


新初始化一个空实例，然后导出
import Vue from 'vue'
export default new Vue()

// a.vue
在a.vue组件中监听
import Briage from 'xxx'
Briage.$on('event_name', callback)

// b.vue
在b.vue组件中触发
import Briage from 'xxx'
Briage.$emit('event_name', [...args])

这样在a组件中就可以监听到在b组件中触发的事件并获得所携带的数据

8.生命周期与事件传递