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生命周期滥用而导致,已上代码修改之后,两次重复登录控制台输出数据为:在首页右上方也能展示用户名
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值