在vue3 项目中 如用户Abc 高级管理员权限 admin, 用户Bbc是 编辑管理员权限 tltle ,用户Cbc 是 分布管理员权限 user 如何利用router设定用户登录后访问权限比如 用户Abc 可以访问所有 用户Bbc 仅能访问首页及内容编辑页，用户Cbc仅能访问首页及分布页面 用户Dbc....,用户Ebc.....

在Vue3中，可以通过路由守卫（Router Guard）来实现用户登录后访问权限的控制。一般来说，路由守卫分为全局守卫、路由独享守卫和组件内守卫三种类型。下面我给出一个简单的示例，演示如何通过路由守卫实现不同角色的权限控制。

首先，我们需要在路由配置中定义不同的路由，例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true, // 所有用户都可以访问首页
      roles: ['admin', 'title', 'user'] // 所有角色都可以访问首页
    }
  },
  {
    path: '/edit',
    name: 'Edit',
    component: Edit,
    meta: {
      requiresAuth: true, // 需要登录才能访问
      roles: ['admin', 'title'] // 只有管理员和编辑管理员可以访问
    }
  },
  {
    path: '/distribution',
    name: 'Distribution',
    component: Distribution,
    meta: {
      requiresAuth: true, // 需要登录才能访问
      roles: ['admin', 'user'] // 只有管理员和分布管理员可以访问
    }
  },
  // 其他路由...
]

在上面的代码中，我们使用了 `meta` 字段来定义路由的元信息。其中，`requiresAuth` 表示该路由是否需要登录才能访问，`roles` 表示该路由可以被哪些角色访问。

接下来，我们可以在 `router/index.js` 中定义全局前置守卫（beforeEach）来进行权限控制。例如：

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuthenticated
  const userRole = store.getters.userRole
  const requiresAuth = to.meta.requiresAuth
  const allowedRoles = to.meta.roles

  if (requiresAuth && !isAuthenticated) {
    // 如果需要登录但用户未登录，则跳转到登录页面
    next('/login')
  } else if (allowedRoles.includes(userRole)) {
    // 如果用户角色在允许访问的角色列表中，则允许访问
    next()
  } else {
    // 否则，跳转到无权访问页面
    next('/access-denied')
  }
})

在上面的代码中，我们首先判断该路由是否需要登录才能访问，如果需要但用户未登录，则跳转到登录页面。然后，我们判断当前用户的角色是否在允许访问的角色列表中，如果是，则允许访问；否则，跳转到无权访问页面。

最后，我们需要在登录成功后保存用户信息和角色信息到 Vuex 中，以供后续的路由守卫使用。例如：

// 登录成功后保存用户信息和角色信息到 Vuex 中
store.commit('setUser', { name: 'Abc', role: 'admin' })

// 注销时清除用户信息和角色信息
store.commit('clearUser')

上面的代码中，我们使用了 `store` 对象来保存用户信息和角色信息。在实际项目中，你可以根据自己的需求选择合适的存储方式。