Vue 路由守卫（Day56）

独享路由守卫

• 独享路由守卫只有前置守卫，没有后置守卫
• 各类守卫间可配合交叉使用

1. 作用： 某一个路由独享的对路由跳转、切换进行控制

2. 实现：

   1. 其使用方式与全局前置路由守卫相似，只是其调用的API为beforeEnter
   2. 将该API写在所需的路由的项中

                   {
                       name: 'NEws',
                       path: 'news',
                       component: News,
                       meta:{isAuth:true,title:'新闻'},
                       beforeEnter:(to, from, next)=>{
                           if (to.meta.isAuth){
                               if (localStorage.getItem('name')==='test'){
                                   next()
                               }
                           }else {
                               next()
                           }
                       }
                   }
   

组件内路由守卫

• 在组件内设置其专有路由规则时使用
• beforeRouteEnter（进入守卫）：通过路由规则进入该组件时调用
• beforeRouteLeave（离开守卫）：通过路由规则离开该组件时调用

    beforeRouteEnter(to,from,next){},
    beforeRouteLeave(to,from,next){
        next()
    },