如何將數據傳遞給正在重用的組件？

Question

我在我的 SPA (vue) 中設置導航，它使用beforeRouteEnter掛鈎來調用后端並檢查用戶是否經過身份驗證。

從登錄頁面導航到受保護頁面時，這將重定向到相同的登錄頁面（如果未經過身份驗證）。 為了向用戶解釋他們首先需要進行身份驗證，我想顯示一條消息。

使用props ，將數據傳遞到登錄頁面是可行的。 但是，如果此重定向來自 /login ==> /protectedRoute ==> /login 則不會進行任何更改，因為 vue 重用了此組件。 在大多數情況下，這種行為是需要的，但在這種特殊情況下卻不是。

beforeRouteEnter看起來像這樣。

beforeRouteEnter (to, from, next)  {
  return axios.post('/api/auth')
  $.then(result => {
    next()
  })
    .catch(err => {
    next({name:"Login", params:{auth: "false"}});
  })
}

如果我從'/guestRoute'移動到'/protectedRoute' ，一切正常，並且數據在被重定向后在'/login'組件中傳遞。

謝謝

Answer 1

通常，這可以通過使用像vuex for vue 之類的 state 管理來完成。 您可以調用分配應用程序級別的錯誤，它們將可用於您的所有組件。

Vuex 是用於 Vue.js 應用程序的 state 管理模式 + 庫。 它用作應用程序中所有組件的集中存儲，其規則確保 state 只能以可預測的方式進行變異。

這意味着您的應用程序數據將由一個商店管理。 您的應用程序可能有這樣的商店

export default new Vuex.Store({
  state: {
    status: '',
    token: localStorage.getItem('token') || '',
    user : {},
    error: ''
  },
  mutations: {

  },
  actions: {

  },
  getters : {

  }
})

因此，您可以檢查將任何錯誤分配給存儲中的錯誤屬性，並在組件中添加檢查是否存在錯誤。