| 近期在搞一个会议健康申报系统时，要搞一个后台，用到了vue-element-admin模板，使用的是PanJianChen(源码地址：https://github.com/PanJiaChen/vue-admin-template) 第一步：当前是下载源码了，下载地址：https://github.com/PanJiaChen/vue-admin-template 第二步：修改登录页面，登录接口（/store/modules/admin.js/login()），根据实际情况修改用户信息接口(/store/modules/admin.js/getInfo()) 第三步：修改权限路由 1.删减路由文件中的配置，export const constantRoutes保留基本的/login、/404 2.动态路由清空，export const asyncRoutes=[] 3./store/modules/permission.js下定义生成路由方法 /** * 后台查询的菜单数据拼装成路由格式的数据 * @param routes */export function generaMenu(routes, data) { data.forEach(item => { let menu = { path: item.url, children: [], name: 'menu_' + item.id, meta: { title: item.name, id: item.id ,icon:item.icon} } // console.log(item.url.indexOf('dashboard')) // console.log(item.children) if (item.children) { // console.log(item.children.length) if (item.children.length > 0) { menu.redirect = item.children[0].url menu.component = Layout } else { // menu.component = () => import(`@/views${item.url}/index`) menu.component = () => Promise.resolve(require(`@/views${item.url}`).default) } if (item.url && item.url.indexOf('dashboard') != -1) { menu = { path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: '控制台', icon: 'dashboard' } }] } } generaMenu(menu.children, item.children) } else { console.log('没有children') } routes.push(menu) })}actions中根据后台的接口加载动态路由 actions: { GenerateRoutes({ commit }, data) { return new Promise(resolve => { const loadMenuData = [] getAuthMenu().then(res => { let data = res.data console.log('menu=>', data) console.log('asyncRoutes=>>', asyncRoutes) let newRoutes = []//此处清空之前的路由 Object.assign(loadMenuData, data) generaMenu(newRoutes, loadMenuData) newRoutes.push({ path: '*', redirect: '/404', hidden: true }) let accessedRouters = newRoutes || [] console.log('accessedRouters', accessedRouters) commit('SET_ROUTERS', accessedRouters) resolve() }) }) }, reset_routers({ commit }) { return new Promise(resolve => { commit('RESET_ROUTERS') resolve() }) } }第四步、在/permission.js中添加动态路由 router.beforeEach(async (to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in const hasToken = getToken() if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) NProgress.done() } else { const hasGetUserInfo = store.getters.name if (hasGetUserInfo) { next() } else { try { // get user info await store.dispatch('admin/getInfo') store.dispatch('GenerateRoutes', {}).then(() => { // 生成可访问的路由表 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 console.log('to=',store.getters.addRouters) next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record NProgress.done() }) // next() } catch (error) { // remove token and go to login page to re-login await store.dispatch('admin/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // in the free login whitelist, go directly next() } else { // other pages that do not have permission to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } }})然后你就可心情地玩了。 到此这篇关于vue-element-admin搭建后台管理系统的实现步骤的文章就介绍到这了,更多相关vue-element-admin搭建后台管理系统内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JavaScript仿小米轮播图效果
利用Vue3 (一）创建Vue CLI 项目 |
