在vue中 如页面结构为首页、管理、名单、三个页面 均需要登录才可以访问 其中管理只有admin账号才可以访问，名单只有user账号才可以访问，如何设置权限动态路由

在Vue中实现动态路由权限控制可以通过路由守卫和权限配置来实现。以下是一个简单的实现思路：

1. 定义路由配置

在定义路由时，可以为每个路由设置一个 meta 属性，用于存储该路由需要的权限信息。例如：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/manage',
    name: 'manage',
    component: Manage,
    meta: {
      requiresAuth: true,
      requiresAdmin: true
    }
  },
  {
    path: '/list',
    name: 'list',
    component: List,
    meta: {
      requiresAuth: true,
      requiresUser: true
    }
  },
  // ...
]

在这个例子中，`requiresAuth` 表示该路由需要登录才能访问，`requiresAdmin` 和 `requiresUser` 分别表示该路由需要管理员权限和普通用户权限才能访问。

2. 定义路由守卫

可以使用 `beforeEach` 路由守卫来检查用户是否有权限访问当前路由。例如：

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  if (requiresAuth && !isLoggedIn()) {
    next('/login')
  } else {
    const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin)
    const requiresUser = to.matched.some(record => record.meta.requiresUser)
    if (requiresAdmin && !isAdmin()) {
      next('/unauthorized')
    } else if (requiresUser && !isUser()) {
      next('/unauthorized')
    } else {
      next()
    }
  }
})

在这个例子中，`isLoggedIn()` 函数用于检查用户是否已经登录，`isAdmin()` 和 `isUser()` 函数分别用于检查用户是否是管理员和普通用户。如果用户没有权限访问当前路由，则跳转到一个未授权页面。

3. 实现权限配置

在上面的例子中，`isLoggedIn()`、`isAdmin()` 和 `isUser()` 函数都是需要根据实际情况来实现的。可以将这些函数封装到一个权限配置文件中，例如：

export default {
  isLoggedIn() {
    return localStorage.getItem('token') !== null
  },
  isAdmin() {
    const user = JSON.parse(localStorage.getItem('user'))
    return user && user.role === 'admin'
  },
  isUser() {
    const user = JSON.parse(localStorage.getItem('user'))
    return user && user.role === 'user'
  }
}

在这个例子中，`isLoggedIn()` 函数检查用户是否已经登录，`isAdmin()` 和 `isUser()` 函数检查用户是否是管理员和普通用户。这些函数可以根据实际需求进行修改。

最后，需要在每个需要访问权限的页面中使用 `beforeRouteEnter` 守卫来检查用户是否有权限访问当前页面。例如：

export default {
  beforeRouteEnter(to, from, next) {
    const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin)
    if (requiresAdmin && !isAdmin()) {
      next('/unauthorized')
    } else {
      next()
    }
  }
}

在这个例子中，如果当前页面需要管理员权限，但用户不是管理员，则跳转到一个未授权页面。

这就是一个简单的动态路由权限控制的实现方式。需要根据具体需求进行修改和扩展。