Vue Router中應用中間件的方法

中間件是我們在軟件開發中的一個古老而強大的概念，當我們在應用程序中使用路由相關模式時，它非常有用。

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

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

不，當應用程序中有路由時，中間件在前端或后端中就會非常常見。比如現在流行的單頁應用程序。

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

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

還有一些......

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

感謝Vue Router，這將非常簡單！因為這個插件實現了一個類似的概念，稱為“導航守衛”。

導航守衛真的很棒，讓我們在進入路由之前，更新之前和離開之前，可以執行一些代碼邏輯。

還可以使用全局守衛。

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

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

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

現在，我們可以用中間件創建我們的“真實”示例：

PS：

1. Vue Router還有組件內的守衛

beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave

其中beforeRouteEnter，很適合在進入頁面之前去獲取數據。

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

以上就是Vue Router中應用中間件的方法的詳細內容，更多關于Vue Router中應用中間件的資料請關注好吧啦網其它相關文章！