分类

• 全局守卫
  1. 全局前置守卫router.beforeEach
  2. 全局解析守卫router.beforeResolve
  3. 全局后置钩子router.afterEach
• 路由独享守卫(在路由配置上定义)
  1. beforeEnter
• 组件内守卫(在组件内定义)
  1. beforeRouteEnter
  2. beforeRouteUpdate
  3. beforeRouteLeave

一、全局守卫

1.全局前置守卫

使用router.beforeEach((to,from,next)=>{})注册一个全局前置守卫
to:进入到哪个路由去
from:从哪个路由离开
next:函数，决定时候展示你要看到的路由页面
next(false):中断当前导航，next('/)跳转到不同的地址

• 如果当前要进入的路径为login，就执行next(),展示login页面
• 否则就弹出警告然后再进入login(这只是举例~)

//在router文件中
import Vue from 'vue'  
import Router from 'vue-router'
Vue.use(Router)
const router = new VueRouter({...})
router.beforeEach((to,from,next)=>{
	if(to.path === '/login'){
    	next();
    }else{
    	alert('请先登录');
        next('/login')
    }
})
export default router
//然后需要将router挂载在vue实例中

有业务需求才知道！！！究竟怎么写

//进入网站的时候，判断token有没有存在，跳转到login页面还是其他页面。
//真是太蠢了！
router.beforeEach((to, from, next) => {
  let isLogin = Boolean(window.localStorage.getItem("token"));
  if (to.name !== "login" && !isLogin) {
    next({ name: "login" });
  } else {
    next();
  }
});

2.全局后置钩子

router.afterEach((to,from)=>{})【钩子不接受next函数也不会改变导航本身】
to:进入到哪个路由去
from:从哪个路由离开

• 如下表示每次切换路由时都会弹出alert，点击确定后展示新页面

router.afterEach((to,from)=>{
	alert('这是全局后置钩子')
})

二、路由独享守卫

beforeEnter

beforeEnter:(to,from,next)=>{}，用法和全局守卫一直，只是将其写进其中一个路由对象中，只在这个路由下起作用

const routes = [
	{
    	path:"/index",
    	name:"index",
        component:Index
     },
    {
    	path:"/login",
        name:"login",
        component:Login,
        beforeEnter:(to,from,next)=>{  //个人觉得和重定向有点相似
        	alert('这是登录页面，去首页吧');
            next('/index')
        }
    }
]

三、组件内守卫

1.beforeRouteEnter

到达这个组件：beforeRouterEnter:(to,from,next)=>{}

• 在守卫执行前，组件实例还没被创建，所以这里是取不到组件实例this
• 但是可以通过next的回调来访问组件实例

export default{
	data(){
    	return{
        	title:"bababalone"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
    	/*
        	直接输出console.log(v.title)//控制台会输入undefined
        */
    	next(v=>{
        	console.log(v.title) //此时控制台可以输入bababalone
        })
    }
}

2.beforeRouteUpdate

改变这个组件：beforeRouteUpdate:(to,from,next)=>{}

3.beforeRouteLeave

离开这个组件：beforeRouteLeave:(to,from,next)=>{}

• 点击其他组件，确认是否离开
• 确认执行next()，取消执行next(false)
• 可以访问组件实例this

export default{
	data(){
    	return{
        	title:"bababalone"
        }
    },
    beforeRouterLeave:(to,from,next)=>{
    	let res = confirm('真的要离开该页面吗？')
        if(res){
        	next()
        }else{
        	next(false)
        }
    }
}