Vue路由守卫（通俗易懂）

一.路由守卫就是：

���如说，当点击商城的购物车的时候，需要判断一下是否登录，如果没有登录，就跳转到登录页面，如果登陆了，就跳转到购物车页面，相当于有一个守卫在安检

（）

路由守卫有三种：

1：全局钩子： beforeEach、 afterEach

（）

2：独享守卫（单个路由里面的钩子）： beforeEnter、 beforeLeave

3：组件内守卫：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

全局守卫

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发
每个守卫方法接收三个参数：

①to: Route: 即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性）

②from: Route: 当前导航正要离开的路由

③next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。

【路由守卫写在main.js文件，或者写在router文件夹下的index.js文件】

① 前置路由守卫（每次切换前被调用）

首先先在需要配置路由守卫的地方加上 meta: { isAuth: true }

    {        path: '/',        name: 'Home',        component: () => import('../views/Home.vue'),        meta: { isAuth: true, title:'主页' },    },

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用router.beforeEach((to, from, next) => {    //如果路由需要跳转    if (to.meta.isAuth) {        //判断 如果school本地存储是qinghuadaxue的时候，可以进去        if (localStorage.getItem('school') === 'qinghuadaxue') {            next()  //放行        } else {            alert('抱歉，您无权限查看！')        }    } else {        // 否则，放行        next()    }})

② 后置路由守卫（每次切换后被调用）

是路由跳转之后执行的事件，可以用作跳转路由后更改网页名

首先路由的meta需要配置title的名字

    {        path: '/',        name: 'Home',        component: () => import('../views/Home.vue'),        meta: { isAuth: true, title:'主页' },    },

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用router.afterEach((to, from) => {    document.title = to.meta.title || '默认名'    //修改网页的title})

③ 独享路由守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置

    {        path: '/',        name: 'Home',        component: () => import('../views/Home.vue'),        meta: { isAuth: true },        beforeEnter: (to, from, next) => {            if (to.meta.isAuth) { //判断是否需要授权                if (localStorage.getItem('school') === 'qinghuadaxue') {                    next()  //放行                } else {                    alert('抱歉，您无权限查看！')                }            } else {                next()  //放行            }        }    },

④ 组件内守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置，直接写在.vue文件中

//通过路由规则，进入该组件时被调用beforeRouteEnter(to,from,next) {  if(toString.meta.isAuth){    if(localStorage.getTime('school')==='qinghuadaxue'){      next()    }else{      alert('学校名不对，无权限查看！')    }  } else{    next()  }},//通过路由规则，离开该组件时被调用 beforeRouteLeave(to,from,next) { next()}