您的位置:

详解Vue3 beforeeach

一、beforeeach是什么?

beforeEach是Vue.js提供的一个全局的导航守卫。它可以在跳转到一个路由前执行一些操作,让我们能够控制路由的跳转。

二、如何使用beforeeach?

在Vue3中,我们可以通过使用router.beforeEach实例方法,向全局添加一个导航守卫。

// main.js
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // do something before navigation
  next()
})

在上述代码中,我们使用了createRouter来创建路由实例,然后在实例中使用beforeEach方法来添加一个导航守卫。在beforeEach的参数中,它可以接收三个参数。

  • to: Route: 即将要进入的目标 Route 对象。
  • from: Route: 当前导航正要离开的路由。
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

三、常见的使用场景

1、校验用户登录状态

在实际项目中,常常需要校验用户是否已经登录了。在使用beforeEach方法时,我们可以在其中添加一个校验逻辑,来实现路由的跳转拦截。

// main.js
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

router.beforeEach((to, from, next) => {
  if (to.meta.auth && !isLogin) {
    next('/login')
  }
  else {
    next()
  }
})

在上述代码中,to.meta.auth表示需要登录才能访问的路由,isLogin表示用户是否处于登录状态。如果用户未登录并且要访问需要登录才能访问的路由,则跳转到登录页面;否则放行。

2、路由切换时展示loading

在路由切换时,有时候需要一些视觉上的效果,比如加载一个loading。我们可以在beforeEach中添加相应的逻辑,来控制loading的显示与隐藏。

// main.js
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // show loading
  next()
})

router.afterEach(() => {
  // hide loading
})

在上述代码中,我们在beforeEach中添加显示loading的逻辑,在路由跳转完成后,在afterEach中添加隐藏loading的逻辑。这样,我们就能在路由切换时展示loading了。

3、路由动态添加title

在每个路由页面中,常常需要为页面添加一个标题。可以通过路由的meta属性来动态添加标题。

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { title: '首页' } // 添加 meta 属性
    },
    ...
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title // 修改网页标题
  }
  next()
})

在上述代码中,我们在每个路由的meta属性中添加了一个title属性,表示该路由的标题。在beforeEach中,我们可以根据该meta属性来动态修改网页标题。

四、总结

本文详细讲解了Vue3中的beforeEach导航守卫的作用和使用方法。同时,还介绍了一些常见的使用场景,包括校验用户登录状态、路由切换时展示loading、路由动态添加title等。希望对Vue3开发者有所帮助。