站長資訊網(wǎng)vue中路由守衛(wèi)一共有三種，分別為：全局路由守衛(wèi)（全局前置守衛(wèi)、全局后置守衛(wèi)），組件內(nèi)路由守衛(wèi)，路由獨享守衛(wèi)（是在路由配置頁面單獨給路由配置的一個守衛(wèi)）。
本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。
路由守衛(wèi)，也可以是路由攔截，我們可以通過路由攔截，來判斷用戶是否登錄，該頁面用戶是否有權(quán)限瀏覽，需要結(jié)合meta來實現(xiàn)
vue中路由守衛(wèi)一共有三種，一個全局路由守衛(wèi)，一個是組件內(nèi)路由守衛(wèi)，一個是router獨享守衛(wèi)
所謂的路由守衛(wèi)可以簡單的理解為一座房子的門口的保安，想要進入這個房子就必須通過保安的檢查，要告訴路由守衛(wèi)你從哪里來？總不能隨便陌生人就給放進去？要到哪里去？然后保安再告訴你下一步該怎么做？如果你的確是這個房子主人允許進入的人，那就讓你進入，否則就要打電話給房子主人，跟房主商量(登錄注冊)，給你權(quán)限。
一.全局守衛(wèi)
1. router.beforeEach((to,from,next)=>{})
2. 回調(diào)函數(shù)中的參數(shù)，to：進入到哪個路由去，from：從哪個路由離開，next：函數(shù)，決定是否展示你要看到的路由頁面。
3. 如下例：main.js中設置全局守衛(wèi)
- 在main.js中，有一個路由實例化對象router。在main.js中設置守衛(wèi)已是全局守衛(wèi)。
- 如下，判斷to.path當前將要進入的路徑是否為登錄或注冊，如果是就執(zhí)行next()，展示當前界面。如果不是，就彈出alert，然后移至登錄界面。
- 這樣就可實現(xiàn)，用戶在未登錄狀態(tài)下，展示的一直是登錄界面。
router.beforeEach((to,from,next)=>{ if(to.path == '/login' || to.path == '/register'){ next(); }else{ alert('您還沒有登錄，請先登錄'); next('/login'); } })
4. 全局后置鉤子router.afterEach((to,from)=>{})
- 只有兩個參數(shù)，to：進入到哪個路由去，from：從哪個路由離。
- 如下，每次切換路由時，都會彈出alert，點擊確定后，展示當前頁面。
router.afterEach((to,from)=>{ alert("after each"); })
5. 判斷store.gettes.isLogin === false 是否登錄
二.組件內(nèi)的守衛(wèi)
1. 到達這個組件時，beforeRouteEnter:(to,from,next)=>{}
- 在Admin.vue文件中，點擊轉(zhuǎn)到admin路由時，執(zhí)行beforeRouteEnter函數(shù)
- to，from參數(shù)與上面使用方法一致。next回調(diào)函數(shù)略有不同。
- 如下例，data 組件內(nèi)守衛(wèi)有特殊情況，如果我們直接以
beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}進行訪問admin頁面，會發(fā)現(xiàn)alert輸出hello undefined。這是因為，現(xiàn)在訪問不到我們的data屬性，執(zhí)行順序是不一致，這與的聲明周期有關。在執(zhí)行完之前，data數(shù)據(jù)還未渲染。所以這里，next()會給一個對應的回調(diào)，幫助完成。
<script> export default { data(){ return{ name:"Arya" } }, beforeRouteEnter:(to,from,next)=>{ next(vm=>{ alert("hello" + vm.name); }) } } </script>
2. 離開這個組件時，beforeRouteLeave:(to,from,next)=>{}
- 點擊其他組件時，判斷是否確認離開。確認執(zhí)行next()；取消執(zhí)行next(false)，留在當前頁面。
beforeRouteLeave:(to,from,next)=>{ if(confirm("確定離開此頁面嗎？") == true){ next(); }else{ next(false); } }
三.路由獨享的守衛(wèi)
1. beforeEnter:(to,from,next)=>{}，用法與全局守衛(wèi)一致。只是，將其寫進其中一個路由對象中，只在這個路由下起作用。
