vue路由守衛(wèi)的三種類型分別是什么

這篇“vue路由守衛(wèi)的三種類型分別是什么”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“vue路由守衛(wèi)的三種類型分別是什么”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。

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

路由守衛(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è)路由離開，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('您還沒有登錄，請(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)行訪問admin頁(yè)面，會(huì)發(fā)現(xiàn)alert輸出hello undefined。這是因?yàn)?，現(xià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>

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

• 點(diǎn)擊其他組件時(shí)，判斷是否確認(rèn)離開。確認(rèn)執(zhí)行next()；取消執(zhí)行next(false)，留在當(dāng)前頁(yè)面。

beforeRouteLeave:(to,from,next)=>{
        if(confirm("確定離開此頁(yè)面嗎？") == true){
            next();
        }else{
            next(false);
        }
    }

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

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

以上是“vue路由守衛(wèi)的三種類型分別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！