Vue Router beforeEach详解

小蓝 • 2024-12-03 13:26 • 编程

一、基本概念

在使用Vue Router进行页面路由的过程中，beforeEach函数是一个非常重要的函数。它在每个路由跳转之前都会被调用，可以用来进行一些全局的身份认证、页面权限控制、页面访问量统计等。

beforeEach函数有三个参数：to、from、next。其中to表示即将跳转的路由，from表示当前页面的路由，next是一个回调函数，用来进行跳转。

下面是一个基本的beforeEach函数示例：

router.beforeEach((to, from, next) => {
  // TODO: 在此处编写全局路由守卫逻辑
  next()
})

二、路由守卫

Vue Router提供了一些路由守卫函数，用来控制路由的跳转、进入、离开等。

1.全局前置守卫

即beforeEach函数，当全局的前置守卫被触发时，所有的路由跳转都会受到影响。

下面是一个前置守卫的示例：

router.beforeEach((to, from, next) => {
  // TODO: 在此处编写全局路由守卫逻辑
  next()
})

2.全局解析守卫

即beforeResolve函数，在全局解析守卫被触发时，所有的异步组件都被解析完毕。

下面是一个全局解析守卫的示例：

router.beforeResolve((to, from, next) => {
  // TODO: 在此处编写全局解析守卫逻辑
  next()
})

3.全局后置钩子

即afterEach函数，这个函数在每个路由跳转完成之后被触发。

下面是一个全局后置钩子的示例：

router.afterEach((to, from) => {
  // TODO: 在此处编写全局后置钩子逻辑
})

4.路由独享守卫

即路由配置中的beforeEnter函数，在路由独享守卫被触发时，只有该路由会受到影响。

下面是一个路由独享守卫的示例：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // TODO: 在此处编写路由独享守卫逻辑
        next()
      }
    }
  ]
})

5.组件内守卫

即在组件中定义的beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave函数。

下面是一个组件内守卫的示例：

const Foo = {
  template: '<div>Foo</div>',
  beforeRouteEnter (to, from, next) {
    // TODO: 在此处编写组件内beforeRouteEnter逻辑
    next()
  },
  beforeRouteUpdate (to, from, next) {
    // TODO: 在此处编写组件内beforeRouteUpdate逻辑
    next()
  },
  beforeRouteLeave (to, from, next) {
    // TODO: 在此处编写组件内beforeRouteLeave逻辑
    next()
  }
}

三、应用场景

beforeEach函数可以被用于多种场景和需求，下面是其中的一些应用场景：

1.身份认证

在进行路由跳转之前，需要判断用户是否已经登录。如果未登录，则需要跳转到登录页面，进行身份认证。

下面是一个身份认证的示例：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2.页面权限控制

在进行路由跳转之前，需要判断用户是否有权限访问该页面。如果没有权限，则需要跳转到403页面。

下面是一个页面权限控制的示例：

router.beforeEach((to, from, next) => {
  const roles = localStorage.getItem('roles')
  if (to.meta.requiresRole) {
    if (!roles || !roles.includes(to.meta.requiresRole)) {
      next('/403')
    } else {
      next()
    }
  } else {
    next()
  }
})

3.页面访问量统计

在进行路由跳转之前，可以统计页面的访问量，并上报到服务器，用于分析用户访问行为。

下面是一个页面访问量统计的示例：

router.beforeEach((to, from, next) => {
  const page = to.path
  // TODO: 统计page的访问量
  next()
})

四、总结

在Vue Router中，beforeEach函数是一个非常重要的全局路由守卫函数。它可以被用于身份认证、页面权限控制、页面访问量统计等多种应用场景。另外，在路由跳转的过程中，还可以使用其他的路由守卫函数，如beforeResolve、afterEach、beforeEnter、beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave等。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/196835.html