全局守卫

全局前置守卫

守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

router.beforeEach(async (to, from) => {
   if (
     // 检查用户是否已登录
     !isAuthenticated &&
     // ❗️ 避免无限重定向
     to.name !== 'Login'
   ) {
     // 将用户重定向到登录页面
     return { name: 'Login' }
   }
 })

全局解析守卫

在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。

router.beforeResolve((to) => {
  if (to.path.startsWith("/blogs")) {
    console.log("用户已登录...");
  }
});

全局后置钩子

不会接受 next 函数也不会改变导航本身,对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。

router.afterEach((to) => {
  document.title = to.path;
});

router.afterEach((to, from, failure) => {
  if (!failure) sendToAnalytics(to.fullPath)
})

路由守卫

beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在从一个不同的路由导航时，才会被触发。

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    // beforeEnter也可以是一个函数数组
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

组件守卫

beforeRouteEnter

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    // 通常用来预防用户在还未保存修改前突然离开
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (!answer) return false
  },
}


beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate

beforeRouteLeave

执行顺序

• 失活组件 beforeRouteLeave（如果有）

• 全局 beforeEach

• 复用组件中，执行 beforeRouteUpdate()

• 路由对象的 beforeEnter

• 解析异步导航组件

• 组件 beforeRouteEnter()

• 全局 beforeResolve()

• 确认导航，页面跳转

• 全局 afterEach

• 更新DOM节点

• 执行组件 beforeRouteEnter中 next() 的回调函数