本文介绍如何在Vue-admin-template中实现动态路由，包括登录接口、退出接口和详情接口的数据交互，以及如何根据角色权限设置动态路由。在`router/index.js`和`store/modules`中进行改造，通过`permission.js`过滤动态路由，并在`user.js`中处理登录、获取用户信息和权限，提供了一个完整的动态路由和权限管理方案。
url: Api.TakeOut,
method: ‘get’
})
}
登录接口数据
{‘code’: 200, ‘data’: {‘token’: ‘X-admin’}, ‘message’: “操作成功”}
退出接口数据
{‘code’: 200, ‘data’: ‘success’, ‘message’: “操作成功”}
详情接口数据
{
“code”: 200,
“data”: {
“avatar”: “https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif”,
“name”: “黄晓果”,
“roles”: [
“editor”
]
}
}
- 改造router/index.js
import Vue from ‘vue’
import Router from ‘vue-router’
Vue.use(Router)
/* Layout */
import Layout from ‘@/layout’
// 基础路由
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: ‘首页’, icon: ‘el-icon-menu’ }
}]
},
]
/**
- 动态路由
*/
export const asyncRoutes = [
{
path: ‘/studentinformation’,
component: Layout,
children: [
{
path: ‘index’,
component: () => import(‘@/views/studentinformation/index’),
meta: { title: ‘学生信息’, icon: ‘el-icon-s-check’ }
}
]
},
{
path: ‘/lecturerinformation’,
component: Layout,
children: [
{
path: ‘index’,
component: () => import(‘@/views/lecturerinformation/index’),
meta: { title: ‘讲师信息’, icon: ‘el-icon-s-custom’, roles: [‘editor’] }
}
]
},
{
path: ‘/coursemanage’,
component: Layout,
meta: { roles: [‘admin’] },
children: [
{
path: ‘index’,
component: () => import(‘@/views/course
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
