VUE框架：vue2转vue3全面细节总结（2）导航守卫

VUE框架：vue2转vue3全面细节总结（2）导航守卫-LMLPHP

全局前置守卫

全局前置守卫通常用来做权限控制，使用 router.beforeEach 即可添加：

const router = createRouter({ ... })

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

每个守卫方法接收两个参数：

to：即将进入的目标路由
from：当前正要离开的路由

可以返回的值如下:

false：取消当前的导航。
true 或 undefined，调用下一个守卫。
一个路由地址：字符串或对象。表示中断当前导航，进行一个新的导航。

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

在之前的 Vue Router 版本中，也是可以使用第三个参数 next 的。目前，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。在这种情况下，要确保 next 在导航守卫中只被调用一次。

全局解析守卫

router.beforeResolve 用法和 router.beforeEach 类似。它是在导航被确认之前，所有组件内守卫和异步路由组件被解析之后被调用。下面这个例子，确保用户可以访问自定义 meta 属性：

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

router.beforeResolve 是获取数据或执行任何其他操作（进入所有页面后都执行的操作）的理想位置。

全局后置钩子

和守卫不同的是，全局后置钩子不接受 next 函数，也不能跳转到其他的路由地址：

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

但它可以接收 failure 作为第三个参数：

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

router.afterEach 对于访问分析、更改页面标题、声明页面等辅助功能都很有帮助。

路由独享的守卫

我们可以直接在路由配置上定义 beforeEnter 守卫：

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // 取消导航
      return false
    },
  },
]

beforeEnter 守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects 不会触发。

我们也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：

// 清除 query 参数
function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}
// 清除 hash 值
function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash]
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams]
  }
]

当然，你也可以通过使用路由的 meta 属性和 全局导航守卫 来实现以上功能。

组件内的守卫

使用声明式 API ，你可以为组件添加以下守卫：

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

beforeRouteEnter 守卫不能访问 this，因为此时组件还没有被创建。你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：

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

注意：beforeRouteEnter 是支持 next 传递回调函数的唯一守卫。

beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用。比如，对于一个带有动态参数的路径 /users/:id，在 /users/1 和 /users/2 之间跳转的时候被调用。因为这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 this。

beforeRouteUpdate (to, from) {
  // 可以使用 this
  this.name = to.params.name
}

beforeRouteLeave 通常用来预防用户在还未保存修改前突然离开。该守卫可以通过返回 false 来取消导航。

beforeRouteLeave (to, from) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  // 取消导航并停留在当前页面
  if (!answer) return false
}

使用组合式 API，你可以为组件添加 onBeforeRouteUpdate 、onBeforeRouteLeave 导航守卫：

<script setup lang="ts">
import { ref } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

const userData = ref()

onBeforeRouteUpdate(async (to, from) => {
  //仅当 id 更改时才获取用户信息
  if (to.params.id !== from.params.id) {
    userData.value = await fetchUser(to.params.id)
  }
})

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  // 取消导航并停留在当前页面
  if (!answer) return false
})
</script>

注意：由于 setup 函数调用时机的问题，使用组合式 API 不存在 onBeforeRouteEnter。

lqj_本人