一.全局守衛(wèi)
1. router.beforeEach((to,from,next)=>{})
2. 回調函數中的參數丁逝,to:進入到哪個路由去汁胆,from:從哪個路由離開,next:函數霜幼,決定是否展示你要看到的路由頁面嫩码。
3. 如下例:main.js中設置全局守衛(wèi)
- 在main.js中,有一個路由實例化對象router罪既。在main.js中設置守衛(wèi)已是全局守衛(wèi)铸题。
- 如下,判斷to.path當前將要進入的路徑是否為登錄或注冊琢感,如果是就執(zhí)行next()丢间,展示當前界面。如果不是猩谊,就彈出alert千劈,然后移至登錄界面。
- 這樣就可實現牌捷,用戶在未登錄狀態(tài)下墙牌,展示的一直是登錄界面。
router.beforeEach((to,from,next)=>{
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert('您還沒有登錄暗甥,請先登錄');
next('/login');
}
})
4. 全局后置鉤子router.afterEach((to,from)=>{})
- 只有兩個參數喜滨,to:進入到哪個路由去,from:從哪個路由離撤防。
- 如下虽风,每次切換路由時,都會彈出alert,點擊確定后辜膝,展示當前頁面无牵。
router.afterEach((to,from)=>{
alert("after each");
})
5. 判斷store.gettes.isLogin === false 是否登錄
二.組件內的守衛(wèi)
1. 到達這個組件時,beforeRouteEnter:(to,from,next)=>{}
- 在Admin.vue文件中厂抖,點擊轉到admin路由時茎毁,執(zhí)行beforeRouteEnter函數
- to,from參數與上面使用方法一致忱辅。next回調函數略有不同七蜘。
- 如下例,data 組件內守衛(wèi)有特殊情況墙懂,如果我們直接以
beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}
進行訪問admin頁面橡卤,會發(fā)現alert輸出hello undefined
。這是因為损搬,現在訪問不到我們的data屬性碧库,執(zhí)行順序是不一致,這與的聲明周期有關场躯。在執(zhí)行完之前谈为,data數據還未渲染。所以這里踢关,next()會給一個對應的回調,幫助完成粘茄。
<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)一致磺平。只是魂仍,將其寫進其中一個路由對象中,只在這個路由下起作用拣挪。