vue学习-组件生命周期、路由守卫

组件生命周期

router中加入以下路径

 {
    path:"/life",
    name:"life",
    component: () => import(/* webpackChunkName: "about" */ '../views/Life.vue')

  }

life.vue

<template>
  <div>
    生命周期举例子
  </div>
</template>

<script>
    export default{
        beforeCreate(){
            console.log(" beforeCreate")
        },
        created(){
            console.log("created")
        },
        beforeMount(){
            console.log("挂载之前")
        },
        mounted(){
            console.log("挂载之后")
        },
        beforeUpdate(){
            console.log("更新之前")
        },
        updated(){
            console.log("更新之后")
        },
        beforeDestroy(){
            console.log("销毁之前")
        },
        destroyed(){
            console.log("销毁之后")
        }
        
    }
</script>

进入之后再切换到其他组件：

路由守卫

1、每次跳转的判断操作

//路由守卫，时间节点
//每次跳转前触发
router.beforeEach((to,from,next)=>{
  console.log("每次跳转前触发")
  //需不需要继续跳转
  console.log(to)
  console.log(from)
  if(to.path=='/life'){
    next('/nopage');
  }else{
    next();
  }
})

//跳转之后触发
router.afterEach((to,from)=>{
  console.log('跳转之后触发')
})

to和from有相应信息

2、在router配置里单独进行判断

  {
    path:"/luyou",
    name:"luyou",
    component: () => import(/* webpackChunkName: "about" */ '../views/luyou.vue'),
    beforeEnter(to,from,next){
     console.log('单独在路由页面进入之前');
     next();
   }

3、在组件中进行操作

    export default{
        beforeRouteEnter(to,from,next){
             console.log("组件路由进入之前")
             next()
        },
        beforeRouteUpdate(to,from,next){
            console.log("组件路由更新之前");
            next();
        },
        beforeRouteLeave(to,from,next){
            console.log("组件路由离开之前");
            next();
        }
    }