Vue Router中應用中間件的方法
中間件是我們在軟件開發(fā)中的一個古老而強大的概念，當我們在應用程序中使用路由相關模式時，它非常有用。
如果您不太了解中間件的含義，Nodejs框架Express里的中間件可以幫助您了解它們的工作原理。
但是，中間件僅適用于后端嗎？
不，當應用程序中有路由時，中間件在前端或后端中就會非常常見。比如現(xiàn)在流行的單頁應用程序。
有一些示例可以說明，何時可以使用中間件：
- 不允許未登錄用戶訪問您的網(wǎng)頁。
- 僅允許某些類型的用戶查看頁面（角色：管理員，作者等）
- 數(shù)據(jù)采集。
- 重置設置或清理存儲空間。
- 限制訪問用戶的年齡。
還有一些......
那么如何在Vue中使用中間件？
感謝Vue Router，這將非常簡單！因為這個插件實現(xiàn)了一個類似的概念，稱為“導航守衛(wèi)”。
導航守衛(wèi)真的很棒，讓我們在進入路由之前，更新之前和離開之前，可以執(zhí)行一些代碼邏輯。
還可以使用全局守衛(wèi)。
但有時我們需要多個中間件用于同一路由，我們可以用Vue Router Multiguard包解決問題。這允許我們設置一系列守衛(wèi)，如下所示：
在上邊示例中可以看到，通過Vue Router Multiguard，在路由配置中應用中間件很容易。讓我們再看一個簡化的例子：
首先，我們定義一個模擬用戶。然后假設您有一個服務，可以從全局state或其他地方獲得當前用戶的數(shù)據(jù)。
現(xiàn)在，我們可以用中間件創(chuàng)建我們的“真實”示例：
PS：
1. Vue Router還有組件內(nèi)的守衛(wèi)
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
其中beforeRouteEnter，很適合在進入頁面之前去獲取數(shù)據(jù)。
2. 如果你閱讀了文檔，你會發(fā)現(xiàn)你可以將下一個路由傳遞給 next() 函數(shù)，例如重定向到 login - next('/login')
以上就是Vue Router中應用中間件的方法的詳細內(nèi)容，更多關于Vue Router中應用中間件的資料請關注腳本之家其它相關文章！
相關文章
在Vue3中使用BabylonJs開發(fā)?3D的初體驗
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開發(fā)?3D?是什么體驗,在本文中，向您展示了如何創(chuàng)建?Vue?組件、Babylon?類、在畫布上渲染場景以及創(chuàng)建?3D?網(wǎng)格，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue項目使用axios封裝request請求，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
Vue中使用ElementUI使用第三方圖標庫iconfont的示例
這篇文章主要介紹了Vue中使用ElementUI使用第三方圖標庫iconfont的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue嵌套路由與404重定向?qū)崿F(xiàn)方法分析
這篇文章主要介紹了vue嵌套路由與404重定向?qū)崿F(xiàn)方法,結(jié)合實例形式分析了vue.js嵌套路由與404重定向的概念、原理、實現(xiàn)步驟與相關操作技巧,需要的朋友可以參考下2018-05-05
keep-alive是Vue的內(nèi)置組件，當它包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀，這篇文章主要介紹了詳解Vue中keep-alive的使用,需要的朋友可以參考下2023-03-03
圖片和文件上傳在很多項目中都可以使用的到，本文主要介紹了VUE+element-ui文件上傳的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue-video-player 斷點續(xù)播的實現(xiàn)
這篇文章主要介紹了vue-video-player 斷點續(xù)播的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
vue2更改data里的變量不生效時,深層更改data里的變量問題
這篇文章主要介紹了vue2更改data里的變量不生效時,深層更改data里的變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關于Vue中forEach()使用方法的相關資料,forEach和map是數(shù)組的兩個方法,作用都是遍歷數(shù)組,在vue項目的處理數(shù)據(jù)中經(jīng)常會用到,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了VUE中使用滾動組件-vueSeamlessScroll,需要的朋友可以參考下2023-10-10