Vue 组件内守卫

1、顺序

 2、位置

组件内部

3、语法

beforeRouteEnter 通过路由规则，进入该组件时被调佣

beforeRouteLeave通过路由规则，离开该组件时被调用

注意：通过组件引入不被调用

beforeRouteEnter (to, from, next) {
    // ...
    console.log('beforeRoueEnter')
    next()
},
beforeRouteLeave (to, from, next) {
    // ...
    console.log('beforeRouteLEave')
    next()
},

4、都可以使用meta

5、使用

// 通过路由规则，进入该组件被调用
beforeRouteEnter (to, from, next) {
    // ...
    console.log('beforeRoueEnter')
    if(to.meta.isAuth){
        // 参与部分
        if(localStorage.getItem('name')==='jojo'){
            next()
        }else{
            alert("用户名不对")
        }
    }else{
        // 不参与的直接next
        next()
    } 
},
// 通过路由规则。离开该组件被调用
beforeRouteLeave (to, from, next) {
    // ...
    console.log('beforeRouteLEave')
    next()
},