中間件是我們在軟件開發(fā)中的一個古老而強(qiáng)大的概念，當(dāng)我們在應(yīng)用程序中使用路由相關(guān)模式時，它非常有用。

如果您不太了解中間件的含義，Nodejs框架Express里的中間件可以幫助您了解它們的工作原理。

但是，中間件僅適用于后端嗎？

不，當(dāng)應(yīng)用程序中有路由時，中間件在前端或后端中就會非常常見。比如現(xiàn)在流行的單頁應(yīng)用程序。

有一些示例可以說明，何時可以使用中間件：

不允許未登錄用戶訪問您的網(wǎng)頁。 僅允許某些類型的用戶查看頁面（角色：管理員，作者等） 數(shù)據(jù)采集。 重置設(shè)置或清理存儲空間。 限制訪問用戶的年齡。

還有一些......

那么如何在Vue中使用中間件？

感謝Vue Router，這將非常簡單！因?yàn)檫@個插件實(shí)現(xiàn)了一個類似的概念，稱為“導(dǎo)航守衛(wèi)”。

導(dǎo)航守衛(wèi)真的很棒，讓我們在進(jìn)入路由之前，更新之前和離開之前，可以執(zhí)行一些代碼邏輯。

還可以使用全局守衛(wèi)。

但有時我們需要多個中間件用于同一路由，我們可以用Vue Router Multiguard包解決問題。這允許我們設(shè)置一系列守衛(wèi)，如下所示：

在上邊示例中可以看到，通過Vue Router Multiguard，在路由配置中應(yīng)用中間件很容易。讓我們再看一個簡化的例子：

首先，我們定義一個模擬用戶。然后假設(shè)您有一個服務(wù)，可以從全局state或其他地方獲得當(dāng)前用戶的數(shù)據(jù)。

現(xiàn)在，我們可以用中間件創(chuàng)建我們的“真實(shí)”示例：

PS：

1. Vue Router還有組件內(nèi)的守衛(wèi)

beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave

其中beforeRouteEnter，很適合在進(jìn)入頁面之前去獲取數(shù)據(jù)。

2. 如果你閱讀了文檔，你會發(fā)現(xiàn)你可以將下一個路由傳遞給 next() 函數(shù)，例如重定向到 login - next(’/login’)

以上就是Vue Router中應(yīng)用中間件的方法的詳細(xì)內(nèi)容，更多關(guān)于Vue Router中應(yīng)用中間件的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！