1.需求分析

目前登入層在myheader元件裡面，登入按鈕也在同一個元件裡面，我們點選登入，呼叫showLogin()方法即可

目前的問題是，我們在另外一個頁面，選擇某些操作時我們需要判斷當前是否登入，如果登入可以進入下一個頁面；如果沒有登入需要顯示登入層，那麼這個問題怎麼解決呢，我們不能直接呼叫頭部登入方法，我們目前的元件是包含在nuxt裡面的

問題總是能夠解決的，其實很簡單，我們可以註冊一個全域性登入事件，當需要登入層是，我們傳送一個登入事件，頭部監聽登入事件，然後我們觸發登入按鈕的點選事件即可開啟登入層。

2.程式碼實現

2.1 修改myheader.vue

引入vue

import Vue from 'vue'

註冊與監聽事件

  mounted() {
    // 註冊全域性登入事件物件
    window.loginEvent = new Vue();
    // 監聽登入事件
    loginEvent.$on('loginDialogEvent', function () {
    document.getElementById("loginDialog").click();
      })
    // 觸發事件，顯示登入層：loginEvent.$emit('loginDialogEvent')
  }

2.2 修改_hoscode.vue頁面

引入cookie

import cookie from 'js-cookie'

修改方法進行判斷是否登入

    schedule(){
      //登入判斷
    lettoken=cookie.get('token')
    if(!token){
    loginEvent.$emit('loginDialogEvent')
    return
    }
    window.location.href=url
      }
    },