包含页面的生命周期以及路由的生命周期

页面内：

<script>
export default {
  name: "",
  data() {
    return {
      value: "路由页面",
    };
  },

// 组件不具有此钩子
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter",this);//进入当前路由的时候触发,注意当前的this是undefined所以是没办法通过this操作页面数据的
    console.log(to.name);//去往的页面路由name（当前页面）
    console.log(from.name);//来自页面路由name（跳转过来的页面）
    next(vm=>{
      console.log(vm,'vm');//可以通过回调函数的参数拿到当前的vue实例
    });//放行
  },
  // 组件不具有此钩子
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave")//离开当前路由的时候触发
    console.log(to.name);
    console.log(from.name);
    if (confirm("您确定离开吗？")) {
      next();
    } else {
      next(false);//传入一个false表示不放行，仍停留于当前路由
    }
  },
  beforeCreate() {
    console.log("beforeCreate---虚拟dom创建前");
  },
  created() {
    console.log("created---虚拟dom创建好之后，vue实例创建完成");
  },
  beforeMount() {
    console.log("beforeMount---虚拟dom挂载之前");
  },
  mounted() {
    //接口请求一般放在mounted中，但是要注意的是服务端渲染时不支持mounted,需要放到created中
    console.log("mounted---虚拟dom挂载到页面后，可用于操作真实dom");
  },
  activated() {
    // <keep-alive>
    //   <router-view></router-view>
    // </keep-alive>
    //当路由组件被<keep-alive>包裹之后是不会执行created、mounted之类的生命周期，
    //所以需要二次触发或者每次进入页面都需要处理的逻辑可以写这里
    console.log(
      "activated，路由被激活时触发---只有被<keep-alive>包裹的路由组件才会触发"
    );
  },
  beforeUpdate() {
    console.log("beforeUpdate---页面数据更新前");
  },
  updated() {
    console.log("updated---页面元素更新后");
  },
  deactivated() {
    console.log(
      "deactivated---路由失活，只有被<keep-alive>包裹的路由组件才会触发"
    );
  },
  beforeDestroy() {
    console.log("beforeDestroy---vue实例销毁前");
  },
  destroyed() {
    console.log("destroyed---vue实例销毁后");
  },
};
</script>

路由内：

独享路由

{
    name: 'generator',
    path: 'generator', //此处不用写'/'
    component: () => import('../views/MenuOne/pages/generator.vue'),
    meta: {
        isAut: true
    },
        // 路由独享守卫
    beforeEnter(to, from, next) {
            const user = sessionStorage.getItem('user')
        if(user?.name=='admin'||false){
            next()
        }else{
            Message.warning('此页面仅限管理员查看')
        }
    }
},

 全局路由守卫

// 全局前置路由守卫，每次路由切换之前调用
router.beforeEach((to, from, next) => {
    const token = sessionStorage.getItem('token')
    if (to.meta.isAut == true) { //需要鉴权
        if (token) { //存在token
            next()
        } else {
            next({
                path: '/login'
            }) //找不到登录信息，返回登录页
        }
    } else {
        next(); //不需要鉴权则放行
    }
})