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生命周期濫用而導緻，已上代碼修改之後，兩次重複登入控制台輸出資料為：在首頁右上方也能展示使用者名