vue3 使用路由独享守卫

Vue3是一个流行的JavaScript框架，它是Vue.js的下一个版本。Vue3相对于Vue2来说，有很多新的特性和性能优化。路由独享守卫是Vue Router提供的一种特性，可以在路由配置中为某个路由单独指定守卫。

使用路由独享守卫可以让你在进入某个路由前做一些额外的处理，比如进行用户身份验证、判断用户是否有权限访问该页面等等。在Vue3中使用路由独享守卫非常简单，你只需要在路由配置中为某个路由单独指定守卫即可。

下面是一个示例：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        // 在进入 /dashboard 路由前做一些额外的处理
        // 比如进行用户身份验证、判断用户是否有权限访问该页面等等
        if (userIsAuthenticated()) {
          next()
        } else {
          next('/login')
        }
      }
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

在上面的示例中，我们为 /dashboard 路由单独指定了一个 beforeEnter 守卫。在进入该路由前，会先执行这个守卫中的逻辑，如果用户已经登录，则继续进入 /dashboard 路由；否则跳转到 /login 路由。