vue路由跳转之bus组件之间传值踩坑记

本文源自毕业设计项目的踩坑经验

**操作应用场景：**当用登录成功0.6秒之后跳转至首页，这时在首页的右上方显示该用户登录时的用户名。

**解决思路：**要实现这个功能的办法很多，我所知道的如下：

1.当用户登录成功时后台返回该用户的信息回来，可以把用户名单独取出来存储在浏览器里面（localStroage，session，cookie），然后再首页直接从浏览器取数据即。这种最简单。

2.用vuex-store存储，这种方法适合大型项目，大量复杂数据传递的应用。

3.URL地址后面携带参数也可达到目的（query，params），此种方法也有三种传递方式。

4.通过中央总线bus-event传值，我之所以用这种方法是因为我对bus传值不熟练因此借此机会达到一个锻炼和深入了解的效果

bus.js公共文件配置：

import Vue from 'vue'   
const bus = new Vue() 
export default bus 
           

Login.vue文件核心代码：

引入bus.js文件import bus from ‘…/bus.js’

mounted(){
			bus.$emit("username",this.username)
		}
           

Index.vue文件核心代码：

mounted(){
			bus.$on('username',msg=>{
				this.username=msg
				console.log('created')
				console.log(this.username)
				console.log(msg)
			})
		},
           

当我从首页跳转至登录页面后控制台输出数据如图所示：

当我登录成功之后并没有数据打印出来

当我把Login里的$emit触发事件放在点击事件里登录成功之后打印的数据所示：

当我返回登录界面再次登录之后输出的数据所示：

也就是说Index里面前一次的触发没有被销毁，并且在首页并不能取到值

更改如下：

Login文件：

beforeDestroy(){
			bus.$emit("username",this.username)
		}
           

Index文件：

created(){
			bus.$on('username',msg=>{
				this.username=msg
				console.log('created')
				console.log(this.username)
				console.log(msg)
			})
		},
		destroyed(){
			bus.$off('username')
		}
           

本次踩坑主要是对vue生命周期滥用而导致，已上代码修改之后，两次重复登录控制台输出数据为：在首页右上方也能展示用户名