Vue Router中應(yīng)用中間件的方法

更新時(shí)間：2020年08月06日 10:55:10 作者：前端知否

這篇文章主要介紹了Vue Router中應(yīng)用中間件的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue router,感興趣的朋友可以了解下

中間件是我們?cè)谲浖_(kāi)發(fā)中的一個(gè)古老而強(qiáng)大的概念，當(dāng)我們?cè)趹?yīng)用程序中使用路由相關(guān)模式時(shí)，它非常有用。

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

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

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

有一些示例可以說(shuō)明，何時(shí)可以使用中間件：

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

還有一些......

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

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

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

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

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

在上邊示例中可以看到，通過(guò)Vue Router Multiguard，在路由配置中應(yīng)用中間件很容易。讓我們?cè)倏匆粋€(gè)簡(jiǎn)化的例子：

首先，我們定義一個(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)入頁(yè)面之前去獲取數(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)用中間件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

在Vue3中使用BabylonJs開(kāi)發(fā)?3D的初體驗(yàn)
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開(kāi)發(fā)?3D?是什么體驗(yàn),在本文中，向您展示了如何創(chuàng)建?Vue?組件、Babylon?類、在畫(huà)布上渲染場(chǎng)景以及創(chuàng)建?3D?網(wǎng)格，需要的朋友可以參考下
2022-07-07
vue項(xiàng)目使用axios封裝request請(qǐng)求的過(guò)程
這篇文章主要介紹了vue項(xiàng)目使用axios封裝request請(qǐng)求，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-04-04
Vue中使用ElementUI使用第三方圖標(biāo)庫(kù)iconfont的示例
這篇文章主要介紹了Vue中使用ElementUI使用第三方圖標(biāo)庫(kù)iconfont的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
vue嵌套路由與404重定向?qū)崿F(xiàn)方法分析
這篇文章主要介紹了vue嵌套路由與404重定向?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js嵌套路由與404重定向的概念、原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
詳解Vue中keep-alive的使用
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀，這篇文章主要介紹了詳解Vue中keep-alive的使用,需要的朋友可以參考下
2023-03-03
VUE+element-ui文件上傳的示例代碼
圖片和文件上傳在很多項(xiàng)目中都可以使用的到，本文主要介紹了VUE+element-ui文件上傳的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn)
這篇文章主要介紹了vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02
vue2更改data里的變量不生效時(shí),深層更改data里的變量問(wèn)題
這篇文章主要介紹了vue2更改data里的變量不生效時(shí),深層更改data里的變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue中forEach()的使用方法例子
這篇文章主要給大家介紹了關(guān)于Vue中forEach()使用方法的相關(guān)資料,forEach和map是數(shù)組的兩個(gè)方法,作用都是遍歷數(shù)組,在vue項(xiàng)目的處理數(shù)據(jù)中經(jīng)常會(huì)用到,需要的朋友可以參考下
2023-09-09
VUE中使用滾動(dòng)組件-vueSeamlessScroll
這篇文章主要介紹了VUE中使用滾動(dòng)組件-vueSeamlessScroll,需要的朋友可以參考下
2023-10-10