vue3路由守卫使用示例

好的，以下是一个使用 Vue3 路由守卫的示例：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About,
      meta: {
        requiresAuth: true // 需要登录才能访问
      }
    }
  ]
})

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

function isAuthenticated() {
  // 判断用户是否已登录
}

在这个示例中，我们定义了一个 `requiresAuth` 属性，表示访问该路由需要用户登录。然后在 `router.beforeEach` 中判断用户是否已登录，如果没有登录则跳转到登录页面。

需要注意的是，这个示例中的 `isAuthenticated` 函数是一个自定义的函数，需要根据实际情况实现。