前端学习笔记之守卫导航

路由守卫：

路由在跳转之前的验证，当满足条件时才会进行跳转。
1.全局守卫：
定义在router上的路由守卫，全局范围内有效，只要有路径跳转就会触发该守卫。+

router.beforeEach(function(to,from,next){})
router.afterEach(function(to,from){})

参数：
to:代表目标路径对象
from：来源路径对象
next：用于决定能否继续跳转

2.路由守卫
路由守卫就是针对单个路由对象配置的守卫。
路由守卫的注册写在路由匹配规则数组里面。
例如：只有跳转到login路由才会触发该守卫。

let router = new Router({
    routes: [
        //...
        {
            path: '/login',
            component: Login,
            beforeEnter: (to, from, next) => {
                next();
            }
        }
    ]
});

3.组件守卫
组件守卫写在组件里，对单个组件进行监听，访问到该组件时才会触发。
以下代码写在相应组件中：

// 在路由跳转时,如果会访问到当前组件,则会触发该守卫
    beforeRouteEnter(to, from, next) {
        next();
    },
    // 在路由跳转时,如果离开当前组件,则会触发该守卫
    beforeRouteLeave (to, from, next) {
       next();
    },
    // 在当前路径下,当路由的参数发生变化时，才会触发该路由守卫
    beforeRouteUpdate(to, from, next) {
        next();
    }