vue管理后台，怎么写动态路由配置路由权限

在Vue管理后台中，动态路由配置和路由权限可以通过以下步骤来实现：

1. 在路由配置文件中定义需要动态添加的路由，例如：

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      children: [
        {
          path: 'user',
          name: 'user',
          component: User
        }
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '*',
      name: 'notfound',
      component: NotFound
    }
  ]
});

2. 定义一个方法来获取动态路由，例如：

function getDynamicRoutes () {
  // 从 API 接口中获取动态路由信息
  const dynamicRoutes = [
    {
      path: '/dashboard/admin',
      name: 'admin',
      component: Admin
    }
  ];

  return dynamicRoutes;
}

3. 在路由守卫中判断用户是否有权限访问该路由，例如：

router.beforeEach((to, from, next) => {
  const token = getToken();
  if (to.path === '/login') {
    next();
  } else {
    if (token) {
      if (!store.getters.permissionRoutes.length) {
        // 如果没有动态路由，则从 API 中获取
        const dynamicRoutes = getDynamicRoutes();
        store.dispatch('setPermissionRoutes', dynamicRoutes);
        router.addRoutes(dynamicRoutes);
        next({...to, replace: true});
      } else {
        next();
      }
    } else {
      next('/login');
    }
  }
});

4. 在 Vuex 中存储动态路由信息，例如：

const state = {
  permissionRoutes: []
};

const mutations = {
  SET_PERMISSION_ROUTES: (state, routes) => {
    state.permissionRoutes = routes;
  }
};

const actions = {
  setPermissionRoutes ({commit}, routes) {
    commit('SET_PERMISSION_ROUTES', routes);
  }
};

const getters = {
  permissionRoutes: state => state.permissionRoutes
};

这样，就可以实现在登录后根据用户权限动态添加路由，并且通过路由守卫限制用户访问没有权限的路由。