Vue守卫之全局守卫，独享守卫和组件内部守卫

守卫

beforeEach(所有路由)-->beforeEnter(某个路由)-->beforeRouteEnter（某个组件）--->afterEach

全局守卫

//进入每一个之前
router.beforeEach((to,from,next)=>{
  // console.log("全局的前置守卫");
  next()
})
​
//进入每一个之后
router.afterEach((to,from)=>{
  // console.log("全局的后置守卫");
})

路由独享守卫

{
    path:"/detail",
    component:()=>import("../pages/detail"),
     //2.路由独享守卫：守卫的是 path. 您能不能访问 "/movie"
     beforeEnter(to,from,next){
      // console.log("路由独享守卫");
      next()
    }
  },

组件内部守卫

 //组件进来之前:比beforeCreate还要早，所以千万不要使用this
 //如果想要在beforeRouteEnter使用$route,要用to,from代替
beforeRouteEnter(to, from,next){
    // console.log("组件进来之前")
        //如果是要加载id是1，去home，否则就next
        console.log(to);
        if(to.query.id==="1"){
            next("/home")
        }else{
            next()
        }
}，
 //路由更新之前
    beforeRouteUpdate(to,from,next){
        console.log("路由更新了");
         axios({
            url:"/api/getMovieDetail",
            params:{
                id:to.query.id
            }
        }).then(res=>{
            console.log(res);
            this.detail=res.data.detail
        })
        next()
    },
    //路由离开之前
    beforeRouteLeave(to,from,next){
        next()
    },

标签：Vue,console,log,detail,独享,next,守卫,路由
来源： https://www.cnblogs.com/kai0537/p/13927650.html