vue-router如何在導航守衛(wèi)中調用一個組件？

官網(wǎng)上的登錄攔截是跳轉到一個固定的頁面，比如

// 判斷是否需要登錄權限 以及是否登錄
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) { // 判斷是否需要登錄權限
    if (judgingLogon()) { // 判斷是否登錄
      next()
    } else { // 沒登錄則跳轉到登錄界面
      next({
        path: '/login',
        query: { back: to.query }
      })
    }
  } else {
    next()
  }
})

這樣可以實現(xiàn)需要登錄時跳轉到對應的登錄頁面，但是現(xiàn)在在點擊某個需要登錄的導航時，是彈出登錄框，登錄框組件已經(jīng)寫好了，問題是：如何在beforeEach里控制這個登錄組件的data呢？也就是在所有需要登錄的頁面都會彈出一個登錄框，而且這個登錄框可以由用戶點擊【登錄】按鈕時觸發(fā)。