震惊！程序员不得不说的Vue组件守卫

阳光穿透心脏的1/2处 2021-07-24 18:49 310阅读 0赞

**组件守卫**  
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。  
**全局前置守卫beforeEach**  
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之

前一直处于 等待中。

你可以使用 router.beforeEach 注册一个全局前置守卫：

//模拟登录状态
    let loginStatus = false
    
    const router = [
      { 
        path: '/',
        name: 'Home',
        component: Home,
          //设置meta前往路由是否需要通过守卫
        meta: { 
          isLogin: false
        }
      },
      { 
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue'),
        meta: { 
          isLogin: false
        }
      },
      { 
        path: "/mine",
        name: "mine",
        component: () => import("../views/Mine.vue"),
        meta: { 
          isLogin: true
        }
      }
    ]
    
    // 参数分别是 即将进入的页面 正要离开的路由 一定要调用next才能生效
    router.beforeEach((to, from, next) => { 
      // 如果要进入的页面需要登录
      if (to.meta.isLogin === true) { 
        // 如果登录状态为未登录
        if (loginStatus === false) { 
          // 则去登录
          next("/login")
        } else { 
          // 否则直接跳转
          next()
        }
      } else { 
        next()
      }
    })

**路由独享守卫beforeEnter**

let loginStatus = false
    const routes = [
      { 
        path: "/shoppinglist",
        name: "shoppinglist",
        component: ShoppingList,
        // 设置路由独享守卫
        beforeEnter: (to, from, next) => { 
          // 判断登录状态
          if (loginStatus === false) { 
            next("/login")
          } else { 
            next()
          }
        }
      }
    ]

**组件内守卫beforeRouteLeave**

**每个守卫方法接收三个参数：**

1.  to: Route: 即将要进入的目标 路由对象
2.  from: Route: 当前导航正要离开的路由
3.  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖

**next 方法的调用参数。  
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。**

1.  next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到  
    from 路由对应的地址。
2.  next(’/’) 或者 next(\{ path: ‘/’ \}):  
    **跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace:  
    true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push  
    中的选项。**
3.  next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给  
    router.onError() 注册过的回调。

**确保要调用 next 方法，否则钩子就不会被 resolved。**