Vue Router中應用中介軟體的方法
阿新 • • 發佈:2020-08-07
中介軟體是我們在軟體開發中的一個古老而強大的概念,當我們在應用程式中使用路由相關模式時,它非常有用。
如果您不太瞭解中介軟體的含義,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中應用中介軟體的資料請關注我們其它相關文章!