Vue中 beforeEach 钩子函数

在 Vue 中，beforeEach 是一种全局路由钩子函数，它会在路由切换之前被执行。它可用于进行用户身份验证、路由权限控制等。

beforeEach 钩子函数接收三个参数：to、from 和 next。

- to：即将要进入的目标路由对象。
- from：当前导航正要离开的路由。
- next：必须调用该函数来 resolve 这个钩子。next() 表示继续前进，next(false) 表示中断当前导航，next('/') 或 next({ path: '/' }) 表示跳转到一个不同的地址。

在 beforeEach 中，可以根据 to 和 from 的不同属性进行路由控制。例如，可以根据用户是否登录来控制路由跳转。如果用户未登录，则跳转到登录页面；如果已登录，则继续前进。

下面是一个简单的示例：

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') // 假设已登录
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (isLogin) { // 判断是否已经登录
      next() // 已登录，继续前进
    } else {
      next({ // 未登录，跳转到登录页面
        path: '/login',
        query: { redirect: to.fullPath } // 将跳转的路由 path 作为参数，登录成功后跳转到该路由
      })
    }
  } else {
    next() // 不需要登录权限，继续前进
  }
})

在上面的示例中，我们通过判断 to.meta.requireAuth 属性来确定该路由是否需要登录权限。如果需要，则从 localStorage 中获取 token 信息，判断用户是否已登录。如果已登录，则调用 next() 继续前进；如果未登录，则调用 next() 跳转到登录页面，并将当前路由作为参数传递给登录页面，以便登录成功后跳转到该路由。如果该路由不需要登录权限，则直接调用 next() 继续前进。