路由导航守卫

路由导航守卫（Navigation Guards）是 Vue Router 提供的功能，用于控制用户在应用中的导航行为。简单来说，它们允许你在用户访问不同路由时执行一些代码，比如检查用户是否登录、加载数据或阻止导航等。

比喻：可以将其想象成机场的安检。安检元在你登机前会检查你的证件和行李，确保一切符合要求，然后才允许你进入登机口。

路由导航守卫的主要类型

1.全局守卫：（全局守卫就像博物馆的总管理员，负责在你进入任何粘贴之前检查你的票和身份，确保你符合参观的基本条件）

• 全局前置守卫 (beforeEach) : 在每次路由切换前执行，可以用于检查用户是否已登录。(像是你进博物馆之前的安检，确保你有票，身份信息合法，然后才允许你进入。如果不符合条件，你就会被拒绝入馆)

  // 创建 Vue Router 实例
  
  const router = new VueRouter({
      route: [
      //定义路由
      ]
  
  });
  
  
  //全局前置守卫
  router.beforeEach((to,from,next) => {
      
      //检查用户是否登录
      if(to.meta.requiresAuth && !isLoggedIn()){
      
          next('/login')
      } else {
      
          //继续导航
          next();
      }
  
  
  });
  

• 全局解析守卫(beforeResolve)：在每次路由切换前执行，并且在组件内守卫和异步路由组件解析之后执行。适用于需要在数据解析之后但在导航确认执行之前执行的逻辑。(类似于在安检之后。但在进入展厅之前的最后检查，确认所有的准备工作都已完成，然后才允许你进入展厅)

  router.beforeResolve((to,from,next) => {
      next();
  
  
  });

• 全局后置守卫(afterEach)：在路由切换完成后执行，一般用于执行一些跟踪或日志记录。(像是你参观结束后的离馆记录，记录你参观了哪些展厅，或是收集你的反馈，但不影响你接下来的行为。)

2. 路由独享守卫:

• beforeEnter: 在进入路由之前执行，只对某个路由有效。通常用于特定路由的导航检查。(像博物馆中某些特定展厅的特别要求，你只有在进入特定展厅时才会遇到这些检查，比如有些展厅需要特定的参观许可或有年龄限制。)

  const routes = [
    {
     //特定展厅的入口检查
      path: '/special-exhibit',
      component: SpecialExhibit,
      beforeEnter: (to, from, next) => {
        if (hasSpecialTicket()) {
          next();
        } else {
          next('/no-access');
        }
      }
    }
  ];

3. 组件内守卫：（组件内守卫就像博物馆中某个展厅的内部规定和检查，只有在你已经进入展厅后，才会遇到这些检查，比如展厅内不能拍照等）

• beforeRouteEnter: 在进入该组件对应的路由之前执行，可以用来在组件实例被创建之前，访问组件的路由信息。（在进入展厅之前，你会遇到展厅导览员的检查，导览员会在你进入展厅之前提供额外的信息或帮助）
• beforeRouteUpdate: 在当前路由改变，但该组件被复用时调用，比如在动态路由参数变化时，执行某些操作。当你在展厅内改变视角，如从一个展品切换到另外一个展品时，这个守卫处理展品之间的转换，确保你在新展品前做了一些准备。)
• befzhantoreRouteleave: 当你离开展厅时，确保你已经完成所有参观步骤，比如归还耳机或记录观展反馈。

export default {
   name: 'MyComponent',
   beforeRouteEnter(to,from,next){
    //在进入该组件路由之前执行
    next(vm => {
        
      //在组件实例创建之后可以访问实例
     });
    
   },

 beforeRouteUpdate(to,from,next) {
    // 当路由变化但组件复用时调用
  next();

    
  },
 
beforeRouteLeave(to,from,next) {
    // 在离开当前路由时调用
    // 可以用来保存用户输入的数据或进行清理操作
    next();
    

 }





};