vue-admin-template动态路由

vue-admin-template中的动态路由是指根据用户权限动态生成路由。通常使用 vue-router 的 addRoutes 方法实现。在获取到用户权限之后，根据权限生成路由并使用 addRoutes 方法添加到路由表中。

相关问题

vue-admin-template动态路由怎么搭建

动态路由是指路由表在运行时动态生成，而不是在编译时生成。在 Vue.js 中，可以使用 Vue Router 实现动态路由。下面是一个简单的步骤，可以帮助你搭建一个基于 Vue-admin-template 的动态路由。

1. 安装 Vue Router

npm install vue-router --save

2. 在 src/router/index.js 中引入 Vue Router，并创建一个路由实例

import Vue from 'vue';
import Router from 'vue-router';
import Layout from '@/layout';

Vue.use(Router);

export const constantRoutes = [
  // 静态路由
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  }
];

const createRouter = () => new Router({
  mode: 'history', // 启用 history 模式
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
});

const router = createRouter();

export default router;

3. 在 src/store/modules/permission.js 中创建一个动态路由生成函数

import { constantRoutes } from '@/router';

/**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, roles) {
  const res = [];

  routes.forEach(route => {
    const tmp = { ...route };
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles);
      }
      res.push(tmp);
    }
  });

  return res;
}

/**
 * 判断用户角色是否有权限访问该路由
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role));
  } else {
    return true;
  }
}

const state = {
  routes: [],
  addRoutes: []
};

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes;
    state.routes = constantRoutes.concat(routes);
  }
};

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes;
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || [];
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
      }
      commit('SET_ROUTES', accessedRoutes);
      resolve(accessedRoutes);
    });
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

4. 在 src/router/index.js 中引入动态路由生成函数，并在路由实例中使用

import Vue from 'vue';
import Router from 'vue-router';
import Layout from '@/layout';
import store from '@/store';

Vue.use(Router);

export const constantRoutes = [
  // 静态路由
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  }
];

const createRouter = () => new Router({
  mode: 'history', // 启用 history 模式
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
});

const router = createRouter();

// 刷新页面时重新生成动态路由
router.beforeEach(async(to, from, next) => {
  const hasRoles = store.getters.roles && store.getters.roles.length > 0;
  if (hasRoles) {
    next();
  } else {
    try {
      // 获取用户角色信息
      const { roles } = await store.dispatch('user/getInfo');
      // 生成动态路由
      const accessedRoutes = await store.dispatch('permission/generateRoutes', roles);
      // 添加动态路由
      router.addRoutes(accessedRoutes);
      next({ ...to, replace: true });
    } catch (error) {
      console.log(error);
    }
  }
});

export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // reset router
}

export default router;

以上是一个基于 Vue-admin-template 的动态路由搭建步骤，你可以根据自己的需求进行修改和扩展。

vue-admin-template动态菜单

对于vue-admin-template动态菜单，你可以通过以下步骤来实现：

1. 首先，在你的项目中创建一个菜单配置文件，可以是一个数组或者一个JSON文件，用来存储菜单的结构和信息。例如：

const menuConfig = [
  {
    name: 'Dashboard',
    path: '/dashboard',
    icon: 'el-icon-s-home'
  },
  {
    name: 'User Management',
    path: '/user',
    icon: 'el-icon-user',
    children: [
      {
        name: 'User List',
        path: '/user/list'
      },
      {
        name: 'Add User',
        path: '/user/add'
      }
    ]
  }
  // 其他菜单项...
];

2. 在你的项目中的侧边栏组件（Sidebar）中，引入上面的菜单配置文件，并使用v-for指令遍历菜单项，生成动态菜单。例如：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuConfig" :key="item.name">
        <router-link :to="item.path">
          <i :class="item.icon"></i>
          {{ item.name }}
        </router-link>
        <ul v-if="item.children">
          <li v-for="child in item.children" :key="child.name">
            <router-link :to="child.path">{{ child.name }}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import menuConfig from '@/config/menuConfig'; // 菜单配置文件的路径

export default {
  data() {
    return {
      menuConfig: menuConfig
    };
  }
};
</script>

3. 使用Vue Router来实现菜单项的路由功能。在你的项目中配置路由表（router/index.js），根据菜单配置文件中的路径信息来设置对应的路由。例如：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard')
  },
  {
    path: '/user/list',
    component: () => import('@/views/UserList')
  },
  {
    path: '/user/add',
    component: () => import('@/views/AddUser')
  }
  // 其他路由配置...
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

这样，当你在菜单中点击某个菜单项时，Vue Router会根据对应的路径加载相应的组件，实现动态菜单的效果。

希望以上步骤对你有所帮助！如有疑问，请随时提问。