久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長(zhǎng)資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      vue路由守衛(wèi)有哪三種類型

      vue中路由守衛(wèi)一共有三種,分別為:全局路由守衛(wèi)(全局前置守衛(wèi)、全局后置守衛(wèi)),組件內(nèi)路由守衛(wèi),路由獨(dú)享守衛(wèi)(是在路由配置頁(yè)面單獨(dú)給路由配置的一個(gè)守衛(wèi))。

      vue路由守衛(wèi)有哪三種類型

      本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。

      路由守衛(wèi),也可以是路由攔截,我們可以通過(guò)路由攔截,來(lái)判斷用戶是否登錄,該頁(yè)面用戶是否有權(quán)限瀏覽,需要結(jié)合meta來(lái)實(shí)現(xiàn)

      vue中路由守衛(wèi)一共有三種,一個(gè)全局路由守衛(wèi),一個(gè)是組件內(nèi)路由守衛(wèi),一個(gè)是router獨(dú)享守衛(wèi)

      所謂的路由守衛(wèi)可以簡(jiǎn)單的理解為一座房子的門口的保安,想要進(jìn)入這個(gè)房子就必須通過(guò)保安的檢查,要告訴路由守衛(wèi)你從哪里來(lái)?總不能隨便陌生人就給放進(jìn)去?要到哪里去?然后保安再告訴你下一步該怎么做?如果你的確是這個(gè)房子主人允許進(jìn)入的人,那就讓你進(jìn)入,否則就要打電話給房子主人,跟房主商量(登錄注冊(cè)),給你權(quán)限。

      一.全局守衛(wèi)

      1. router.beforeEach((to,from,next)=>{})

      2. 回調(diào)函數(shù)中的參數(shù),to:進(jìn)入到哪個(gè)路由去,from:從哪個(gè)路由離開(kāi),next:函數(shù),決定是否展示你要看到的路由頁(yè)面。

      3. 如下例:main.js中設(shè)置全局守衛(wèi)

      • 在main.js中,有一個(gè)路由實(shí)例化對(duì)象router。在main.js中設(shè)置守衛(wèi)已是全局守衛(wèi)。
      • 如下,判斷to.path當(dāng)前將要進(jìn)入的路徑是否為登錄或注冊(cè),如果是就執(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('您還沒(méi)有登錄,請(qǐng)先登錄');     next('/login');   } })

      4. 全局后置鉤子router.afterEach((to,from)=>{})

      • 只有兩個(gè)參數(shù),to:進(jìn)入到哪個(gè)路由去,from:從哪個(gè)路由離。
      • 如下,每次切換路由時(shí),都會(huì)彈出alert,點(diǎn)擊確定后,展示當(dāng)前頁(yè)面。
      router.afterEach((to,from)=>{   alert("after each"); })

      5. 判斷store.gettes.isLogin === false 是否登錄

      二.組件內(nèi)的守衛(wèi)

      1. 到達(dá)這個(gè)組件時(shí),beforeRouteEnter:(to,from,next)=>{}

      • 在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)行訪問(wèn)admin頁(yè)面,會(huì)發(fā)現(xiàn)alert輸出hello undefined。這是因?yàn)?,現(xiàn)在訪問(wèn)不到我們的data屬性,執(zhí)行順序是不一致,這與的聲明周期有關(guān)。在執(zhí)行完之前,data數(shù)據(jù)還未渲染。所以這里,next()會(huì)給一個(gè)對(duì)應(yīng)的回調(diào),幫助完成。
      <script> export default {     data(){         return{             name:"Arya"         }     },     beforeRouteEnter:(to,from,next)=>{         next(vm=>{             alert("hello" + vm.name);         })     } } </script>

      vue路由守衛(wèi)有哪三種類型

      vue路由守衛(wèi)有哪三種類型

      2. 離開(kāi)這個(gè)組件時(shí),beforeRouteLeave:(to,from,next)=>{}

      • 點(diǎn)擊其他組件時(shí),判斷是否確認(rèn)離開(kāi)。確認(rèn)執(zhí)行next();取消執(zhí)行next(false),留在當(dāng)前頁(yè)面。
      beforeRouteLeave:(to,from,next)=>{         if(confirm("確定離開(kāi)此頁(yè)面嗎?") == true){             next();         }else{             next(false);         }     }

      三.路由獨(dú)享的守衛(wèi)

      1. beforeEnter:(to,from,next)=>{},用法與全局守衛(wèi)一致。只是,將其寫進(jìn)其中一個(gè)路由對(duì)象中,只在這個(gè)路由下起作用。

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)