Vue Router中應(yīng)用中間件的方法
中間件是我們在軟件開發(fā)中的一個(gè)古老而強(qiáng)大的概念，當(dāng)我們在應(yīng)用程序中使用路由相關(guān)模式時(shí)，它非常有用。
如果您不太了解中間件的含義，Nodejs框架Express里的中間件可以幫助您了解它們的工作原理。
但是，中間件僅適用于后端嗎？
不，當(dāng)應(yīng)用程序中有路由時(shí)，中間件在前端或后端中就會(huì)非常常見。比如現(xiàn)在流行的單頁應(yīng)用程序。
有一些示例可以說明，何時(shí)可以使用中間件：
- 不允許未登錄用戶訪問您的網(wǎng)頁。
- 僅允許某些類型的用戶查看頁面（角色：管理員，作者等）
- 數(shù)據(jù)采集。
- 重置設(shè)置或清理存儲(chǔ)空間。
- 限制訪問用戶的年齡。
還有一些......
那么如何在Vue中使用中間件？
感謝Vue Router，這將非常簡單！因?yàn)檫@個(gè)插件實(shí)現(xiàn)了一個(gè)類似的概念，稱為“導(dǎo)航守衛(wèi)”。
導(dǎo)航守衛(wèi)真的很棒，讓我們在進(jìn)入路由之前，更新之前和離開之前，可以執(zhí)行一些代碼邏輯。
還可以使用全局守衛(wèi)。
但有時(shí)我們需要多個(gè)中間件用于同一路由，我們可以用Vue Router Multiguard包解決問題。這允許我們設(shè)置一系列守衛(wèi)，如下所示：
在上邊示例中可以看到，通過Vue Router Multiguard，在路由配置中應(yīng)用中間件很容易。讓我們再看一個(gè)簡化的例子：
首先，我們定義一個(gè)模擬用戶。然后假設(shè)您有一個(gè)服務(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. 如果你閱讀了文檔，你會(huì)發(fā)現(xiàn)你可以將下一個(gè)路由傳遞給 next() 函數(shù)，例如重定向到 login - next('/login')
以上就是Vue Router中應(yīng)用中間件的方法的詳細(xì)內(nèi)容，更多關(guān)于Vue Router中應(yīng)用中間件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue3項(xiàng)目新用戶引導(dǎo)組件driver.js示例詳解
好用的用戶引導(dǎo)插件有?intro.js?和?driver.js?兩個(gè)，對(duì)比了一下，最終還是使用了driver.js，這篇文章主要介紹了vue3項(xiàng)目新用戶引導(dǎo)組件(driver.js),需要的朋友可以參考下2022-08-08
vue項(xiàng)目實(shí)現(xiàn)登陸注冊效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)登陸注冊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
多個(gè)vue項(xiàng)目實(shí)現(xiàn)共用一個(gè)node-modules文件夾
這篇文章主要介紹了多個(gè)vue項(xiàng)目實(shí)現(xiàn)共用一個(gè)node-modules文件夾，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue封裝一個(gè)簡單的div框選時(shí)間的組件的方法
這篇文章主要介紹了vue封裝一個(gè)簡單的div框選時(shí)間的組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的方法
這篇文章主要介紹了Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
vue大屏自適應(yīng)的實(shí)現(xiàn)方法(cv就能用)
最近在用VUE寫大屏頁面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
在本篇文章里小編給大家整理的是關(guān)于Vue基礎(chǔ)配置講解內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2019-11-11
mpvue中使用flyjs全局?jǐn)r截的實(shí)現(xiàn)代碼
這篇文章主要介紹了mpvue中使用flyjs全局?jǐn)r截的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問題
這篇文章主要介紹了vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06