您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue路由守衛(wèi)有三種分別是什么的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
vue路由守衛(wèi)有三種,分別為:1、全局守衛(wèi)“router.beforeEach”;2、組件內(nèi)的守衛(wèi)“beforeRouteEnter”;3、路由獨(dú)享守衛(wèi)“beforeEnter”。
vue中路由守衛(wèi)一共有三種,一個(gè)全局路由守衛(wèi),一個(gè)是組件內(nèi)路由守衛(wèi),一個(gè)是路由獨(dú)享守衛(wèi)。
所謂的路由守衛(wèi)可以簡單的理解為一座房子的門口的保安,想要進(jìn)入這個(gè)房子就必須通過保安的檢查,要告訴路由守衛(wèi)你從哪里來?總不能隨便陌生人就給放進(jìn)去?要到哪里去?然后保安再告訴你下一步該怎么做?如果你的確是這個(gè)房子主人允許進(jìn)入的人,那就讓你進(jìn)入,否則就要打電話給房子主人,跟房主商量(登錄注冊),給你權(quán)限。
// 通過這個(gè)匹配判斷是否有該權(quán)限或要求,這個(gè)一般作為頁面權(quán)限設(shè)置,比如哪些頁面需要登錄才能進(jìn)入,哪些不需要 to.matched.some(res => res.meta.requireAuth)
在main.js中,有一個(gè)路由實(shí)例化對象router。在main.js中設(shè)置守衛(wèi)已是全局守衛(wèi)。
如下,判斷to.path當(dāng)前將要進(jìn)入的路徑是否為登錄或注冊,如果是就執(zhí)行next(),展示當(dāng)前界面。如果不是,就彈出alert,然后移至登錄界面。
這樣就可實(shí)現(xiàn),用戶在未登錄狀態(tài)下,展示的一直是登錄界面。
router.beforeEach((to,from,next)=>{ if(to.path == '/login' || to.path == '/register'){ next(); }else{ alert('您還沒有登錄,請先登錄'); next('/login'); } })
只有兩個(gè)參數(shù),to:進(jìn)入到哪個(gè)路由去,from:從哪個(gè)路由離。
如下,每次切換路由時(shí),都會彈出alert,點(diǎn)擊確定后,展示當(dāng)前頁面。
router.afterEach((to,from)=>{ alert("after each"); })
在Admin.vue文件中,點(diǎn)擊轉(zhuǎn)到admin路由時(shí),執(zhí)行beforeRouteEnter函數(shù)
to,from參數(shù)與上面使用方法一致。next回調(diào)函數(shù)略有不同。
如下例,data 組件內(nèi)守衛(wèi)有特殊情況,如果我們直接以beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}
進(jìn)行訪問admin頁面,會發(fā)現(xiàn)alert輸出hello undefined
。這是因?yàn)?,現(xiàn)在訪問不到我們的data屬性,執(zhí)行順序是不一致,這與的聲明周期有關(guān)。在執(zhí)行完之前,data數(shù)據(jù)還未渲染。所以這里,next()會給一個(gè)對應(yīng)的回調(diào),幫助完成。
<script> export default { data(){ return{ name:"Arya" } }, beforeRouteEnter:(to,from,next)=>{ next(vm=>{ alert("hello" + vm.name); }) } } </script>
點(diǎn)擊其他組件時(shí),判斷是否確認(rèn)離開。確認(rèn)執(zhí)行next();取消執(zhí)行next(false),留在當(dāng)前頁面。
beforeRouteLeave:(to,from,next)=>{ if(confirm("確定離開此頁面嗎?") == true){ next(); }else{ next(false); } }
感謝各位的閱讀!關(guān)于“vue路由守衛(wèi)有三種分別是什么”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。