vue3全局路由拦截

解决方案

在Vue 3项目中，我们可以通过vue-router提供的钩子函数来实现全局路由拦截。这有助于我们在页面切换时进行权限验证、加载动画展示、页面刷新等操作。

使用 beforeEach 实现基本拦截

最常用的方法是利用router.beforeEach()，它会在每个导航触发时执行：

javascript
import { createRouter, createWebHistory } from 'vue-router'</p>

<p>const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})</p>

<p>// 全局前置守卫
router.beforeEach((to, from, next) => {
  // to：即将进入的目标路由对象
  // from：当前导航正要离开的路由对象
  // next：必须调用该方法来 resolve 这个钩子</p>

<p>console.log('正在导航到:', to.path)</p>

<p>// 检查用户是否登录
  const isLogin = localStorage.getItem('token')</p>

<p>if (to.meta.requiresAuth) { // 如果目标路由需要认证
    if (!isLogin) {
      return next({ name: 'login' }) // 重定向到登录页
    }
  }</p>

<p>next() // 放行
})</p>

<p>export default router

使用 beforeResolve 处理异步数据

如果需要在组件渲染之前获取数据，可以使用beforeResolve:

javascript
router.beforeResolve((to, from, next) => {
  // 获取所有匹配的组件
  const matchedComponents = router.getMatchedComponents(to)</p>

<p>// 如果没有匹配的组件直接放行
  if (!matchedComponents.length) return next()</p>

<p>// 执行异步操作
  Promise.all(matchedComponents.map(Component => {
    if (Component.asyncData) {
      return Component.asyncData()
    }
  })).then(() => {
    next()
  })
})

使用 afterEach 添加全局逻辑

afterEach用于在导航完成后执行一些操作，比如关闭加载动画：

javascript
router.afterEach((to, from) => {
  // 关闭加载动画
  document.body.scrollTop = 0 // 滚动到顶部</p>

<p>// 记录访问日志
  console.log(<code>已导航到 ${to.path})
})