如何实现vue动态路由和角色权限

Vue动态路由和角色权限可以通过以下步骤实现：

1. 在路由配置文件中添加动态路由。动态路由是指在运行时根据用户权限动态加载的路由。可以通过以下方式实现：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true, role: ['admin', 'user'] }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: { requiresAuth: true, role: ['admin'] }
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    meta: { requiresAuth: true, role: ['user'] }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/404',
    name: 'NotFound',
    component: NotFound
  },
  {
    path: '*',
    redirect: '/404'
  }
];

其中，meta属性用于保存路由元信息，requiresAuth表示该路由需要登录才能访问，role表示该路由需要的用户角色。

2. 在路由守卫中进行角色权限验证。路由守卫是指在路由跳转时进行拦截和验证的函数。可以通过以下方式实现：

router.beforeEach((to, from, next) => {
  const isLoggedIn = AuthService.isLoggedIn();
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login');
  } else if (to.meta.role && to.meta.role.length > 0) {
    const userRole = AuthService.getUserRole();
    if (to.meta.role.indexOf(userRole) === -1) {
      next('/404');
    } else {
      next();
    }
  } else {
    next();
  }
});

其中，AuthService是一个用于保存和获取用户登录和角色信息的服务。当路由需要登录才能访问时，如果用户未登录，则跳转到登录页面；当路由需要特定的用户角色时，如果用户角色不符合要求，则跳转到404页面；否则，继续进行路由跳转。

3. 在登录成功后保存用户登录和角色信息。可以通过以下方式实现：

const AuthService = {
  isLoggedIn() {
    return localStorage.getItem('isLoggedIn') === 'true';
  },
  setLoggedIn(value) {
    localStorage.setItem('isLoggedIn', value);
  },
  getUserRole() {
    return localStorage.getItem('userRole');
  },
  setUserRole(role) {
    localStorage.setItem('userRole', role);
  }
};

其中，setLoggedIn和setUserRole用于保存登录状态和用户角色信息，isLoggedIn和getUserRole用于获取登录状态和用户角色信息。

通过以上三个步骤，就可以实现Vue动态路由和角色权限。