vue3 beforeeach使用

在Vue 3中，`beforeEach`是一个生命周期钩子函数，它会在每次路由变化（组件实例创建之前）执行。这个功能通常用于设置一些通用的初始化操作、检查用户权限、获取数据缓存等。它的基本语法如下：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    // 在每次导航之前执行的函数
    beforeEach(() => {
      // 这里可以添加你的预处理逻辑，例如检查token是否过期
      console.log('当前路由：', route.path)
      if (!route.meta.requiresAuth && !localStorage.getItem('token')) {
        // 如果路由不需要认证并且本地存储无token，跳转到登录页面
        router.push('/login')
      }
    })

    return {}
  }
}

在这个例子中，`useRoute`是通过Vue Router提供的API获取当前路由信息的。`beforeEach`会在每个导航开始前执行，并可以根据路由的特性（如`meta.requiresAuth`）来进行相应的处理。