vue路由守卫

路由守卫

vue中路由一共有三中：全局路由守卫，组件路由守卫，路由独享守卫

全局路由守卫

全局路由守卫分为两个：一个是全局前置守卫：在进入每一个路由之前执行这个回调，一个是全局后置守卫：在每次路由跳转后执行这个回调

//全局前置守卫对整个单页面应用中的所有路由都有用
router.beforeEach((to,from,next)=>{
    //to：到哪个页面去
    //from：从哪个页面来
    next();//执行效果依赖next方法的调用参数。可以控制网页的跳转。
})
//全局后置守卫
router.afterEach(to.from)={}

组件路由守卫

//跟methods:{}同级别书写,路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter(to,from ,next){
    //在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm访问组件实例
    next(vm=>{})
}
beforeRouteUpdate(to,from ,next){
    //同一个页面，刷新不同数据是调用
}
beforeRouteLeave(to,from ,next){
    //离开当前路由时调用
}

路由独享守卫

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // ...
            }
        }
    ]
})