在vue中 如页面结构为首页、管理、名单、下载、上传、五个页面 均需要登录才可以访问 其中管理只有admin账号才可以访问；名单只有user账号才可以访问；下载页面只有manager账号才可以访问；上传页面admin及user可以访问，但manager无权访问；如何设置权限动态路由

在 Vue 中实现动态路由权限控制，可以使用 Vue Router 提供的导航守卫。具体实现步骤如下：

1. 在路由配置文件中定义路由的 meta 属性，用于存储该路由需要的权限信息。例如：

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      requiresAuth: true // 需要登录才能访问
    }
  },
  {
    path: '/admin',
    component: Admin,
    meta: {
      requiresAuth: true, // 需要登录才能访问
      requiresAdmin: true // 需要管理员权限才能访问
    }
  },
  {
    path: '/list',
    component: List,
    meta: {
      requiresAuth: true, // 需要登录才能访问
      requiresUser: true // 需要用户权限才能访问
    }
  },
  {
    path: '/download',
    component: Download,
    meta: {
      requiresAuth: true, // 需要登录才能访问
      requiresManager: true // 需要管理员权限才能访问
    }
  },
  {
    path: '/upload',
    component: Upload,
    meta: {
      requiresAuth: true, // 需要登录才能访问
      requiresAdminOrUser: true // 需要管理员或用户权限才能访问
    }
  }
];

2. 在路由配置文件中定义一个全局前置守卫（beforeEach），用于根据用户的权限信息判断是否可以访问该路由。例如：

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('isLoggedIn'); // 判断用户是否已登录
  const isAdmin = localStorage.getItem('isAdmin'); // 判断用户是否是管理员
  const isUser = localStorage.getItem('isUser'); // 判断用户是否是普通用户
  const isManager = localStorage.getItem('isManager'); // 判断用户是否是下载管理员

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要登录才能访问该路由
    if (!isLoggedIn) {
      // 如果用户未登录，则跳转到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      // 如果用户已登录，则根据用户的权限信息判断是否可以访问该路由
      if (to.matched.some(record => record.meta.requiresAdmin)) {
        // 需要管理员权限才能访问该路由
        if (isAdmin) {
          next();
        } else {
          next({ path: '/' });
        }
      } else if (to.matched.some(record => record.meta.requiresUser)) {
        // 需要用户权限才能访问该路由
        if (isUser) {
          next();
        } else {
          next({ path: '/' });
        }
      } else if (to.matched.some(record => record.meta.requiresManager)) {
        // 需要下载管理员权限才能访问该路由
        if (isManager) {
          next();
        } else {
          next({ path: '/' });
        }
      } else if (to.matched.some(record => record.meta.requiresAdminOrUser)) {
        // 需要管理员或用户权限才能访问该路由
        if (isAdmin || isUser) {
          next();
        } else {
          next({ path: '/' });
        }
      } else {
        next();
      }
    }
  } else {
    next();
  }
});

3. 在登录成功后，将用户的权限信息存储到本地存储中。例如：

login() {
  // 登录成功后，将用户的权限信息存储到本地存储中
  localStorage.setItem('isLoggedIn', true);
  localStorage.setItem('isAdmin', true);
  localStorage.setItem('isUser', true);
  localStorage.setItem('isManager', true);
}

这样，当用户访问需要权限控制的路由时，就会根据用户的权限信息判断是否可以访问该路由。如果用户没有相应的权限，则会被重定向到首页。