Vue2.0 Vue路由 组件内路由守卫

组件内路由守卫

选一个最简单的About

export default {
    name: 'About',
    components:{},
    //当路由进入之前
    //通过路由规则，进入该组件时被调用
    beforeRouteEnter (to, from, next) {
        // ...
    },
    //当路由离开之前
    //通过路由规则，离开该组件时被调用
    beforeRouteLeave (to, from, next) {
        // ...
    }
}

只有全局路由守卫我们称为前置和后置

前置后置的话，如果当前的位置是/home如果切换到/about会引起俩个路由守卫的调用

但是beforeRouteEnter和beforeRouteLeave,当你的路径在/home当你来到/about之前进入About组件之前,beforeRouteEnter调用了

如果页面还有一个导航项/test;你想从当前的/about位置离开，在走之前，人家给你调的是beforeRouteLeave

有的时候你不是通过路由规则进入组件的(通过一般组件形式:引入,注册,<组件名 />)

你单独写在About这，只不过是About组件独有的

进来的时候(beforeRouteEnter)to永远是about,当你离开的时候(beforeRouteLeave)from也是about相关的

总结

组件内守卫

//进入守卫:通过路由规则,进入该组件时被调用
beforeRouteEnter(to,from,next){
}

//离开守卫:通过路由规则,离开该组件时被调用
beforeRoutLeave(to,from,next){
}