Vue Router中應(yīng)用中間件的方法
中間件是我們?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è)。 僅允許某些類(lèi)型的用戶查看頁(yè)面(角色:管理員,作者等) 數(shù)據(jù)采集。 重置設(shè)置或清理存儲(chǔ)空間。 限制訪問(wèn)用戶的年齡。還有一些......
那么如何在Vue中使用中間件?
感謝Vue Router,這將非常簡(jiǎn)單!因?yàn)檫@個(gè)插件實(shí)現(xiàn)了一個(gè)類(lèi)似的概念,稱為“導(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)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象2. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建( Postfix )3. ASP新手必備的基礎(chǔ)知識(shí)4. Docker 啟動(dòng)Redis 并設(shè)置密碼的操作5. asp文件用什么軟件編輯6. python 爬取豆瓣網(wǎng)頁(yè)的示例7. vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)8. 利用CSS制作3D動(dòng)畫(huà)9. python如何操作mysql10. JS中6個(gè)對(duì)象數(shù)組去重的方法

網(wǎng)公網(wǎng)安備