标签：Vue console log detail 独享 next 守卫 路由

守卫

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。