路由导航守卫

路由导航守卫(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();
    

 }





};

你可能感兴趣的:(Vue3学习,前端,javascript,开发语言)