VUE3 路由守卫meta

在Vue3中，可以使用路由守卫来控制页面的访问权限。路由守卫可以在页面加载前、加载后、路由切换前、切换后等不同的生命周期中执行相应的操作。其中，可以通过设置meta字段来控制页面的访问权限。

具体来说，可以在路由配置中设置meta字段，如下所示：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

在上面的代码中，我们为Home路由设置了requiresAuth字段，并将其设置为true。这意味着只有在用户已经登录的情况下才能访问该页面。如果用户没有登录，则会被重定向到登录页面。

接下来，我们可以在路由守卫中读取meta字段，并根据其值来判断是否有访问权限。例如，可以在路由切换前的守卫中执行以下操作：

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

在上面的代码中，我们读取了目标路由的meta字段，并将其存储在requiresAuth变量中。如果requiresAuth为true，并且用户没有登录，则会被重定向到登录页面。否则，可以继续访问该页面。

需要注意的是，isLoggedIn()函数应该根据自己的业务逻辑来实现，用于判断用户是否已经登录。