详解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开发者有所帮助。