淘先锋技术网

首页 1 2 3 4 5 6 7

Vue路由守卫

1.路由守卫

先说我的理解，路由守卫类似一个安保系统，要向进入园区，必须经过安保的同意，同意了就放行，继续操作，那么路由守卫也是一样的

包含 全局守卫 独享守卫 组件内守卫

1.1 全局守卫

应用于整个页面，处理对应的事件，分为前置守卫和后置守卫

  • to：进入到哪个路由去

  • from：从哪个路由离开

  • next：路由的控制参数，常用的有next(true)和next(false)

<!--1.定义组件-->
let comA ={
    data(){},
    template:``,
    created(){
    this.id = this.$route.params.id
    this.username = this.$route.params.username
    }
}
<!--2.定义路由-->
let router = new VueRouter({
    routes:
     [
      {path:'/user:id/username/:username',component: comA}
     ]
})
<!--4.绑定路由全局守卫 前置-->
router.beforeEach((to,from,next)=>{
    console.log('前置',to,from)
    next();
})
<!--绑定路由全局守卫 后置-->
router.afterEach((to,from)=>{
    console.log('后置',to,from);
})
<!--3.路由注册-->
router

1.2 路由独享守卫

该路由有自己的守卫任务，如该生产车间有自己的任务，保证自己车间的任务能够完成

官方的定义是：你可以在路由配置上直接定义beforEnter守卫，这些守卫和全局前置守卫的方法和参数是一样的

参数：
beforeEnter(to,from,next)
<!-- to 路由对象，要进入的目标
<!-- from 当前导航正要离开的路由
<!-- next 是否在守卫之后进行跳转-->
next()  所指路由
next(false) 中断当前路由
next('route') 跳转知道路由
next('error') 跳转错误路由
直接在配置信息上定义路由
let router = new VueRouter({
    routes:
        [
            path: '/user:id/username/:username',
            component:comA,
            name:'coma'
            beforeEnter:(to,from,next){
                next();
            },
            {
                path:'/comA',
                component:comB
            }
        ]
})
​
let vm = new Vue({
    el:'#app',
    data:{},
    methods:{},
    created(){},
    router
})

1.3 组件内守卫

通常用来禁止用户还未保存的情况下突然离开

beforeRouteEnter

路由进入之前
beforeRouteEnter(to,from,next){
    next()
}
路由更新之前
beforeRouteUpdate(to,form,next){
    this.id = to.params.id
    this.username = to.params.username
    next()
}
beforeRouterLeave(to,from,next){
    
}