为了防止接口异常,在上一章的基础上创建一个mork文件夹写了个menu.json放入public文件里：
Element官网：element.eleme.cn/#/zh-CN/gui…
{
"data": [
{
"id": 101,
"authName": "用户管理",
"path": "users",
"children": [
{
"id": 1,
"authName": "用户列表",
"path": "users",
"children": []
},
{
"id": 2,
"authName": "添加用户",
"path": "addusers",
"children": []
}
]
},
{
"id": 102,
"authName": "分类管理",
"path": "categories",
"children": [
{
"id": 1,
"authName": "分类列表",
"path": "categories",
"children": []
},{
"id": 2,
"authName": "添加分类",
"path": "addcategories",
"children": []
}
]
},
{
"id": 103,
"authName": "商品管理",
"path": "goods",
"children": [
{
"id": 1,
"authName": "商品列表",
"path": "goods",
"children": []
}
]
}
],
"meta": {
"msg": "获取菜单列表成功",
"status": 200
}
}
App.vue里放入路由容器：
view下LoginView.vue：
.myform{ width:600px; margin:50px auto; }view下IndexView.vue:
//这里做了点改动，相比上一章这里采取动态路由来获取侧边栏以及二级菜单：
相关注意点已用注释表明：
.el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; }router下路由配置：采取动态路由，之前的注释掉了：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'login',
component:()=>import('@/views/LoginView.vue')
},
{
path:'/index',
name:'index',
/* 已进入页面就默认进入二级路由users页面 */
redirect:'/index/users',
component:()=>import('@/views/IndexView.vue'),
children:[{
path:'users',
name:'users',
component:()=>import('../views/UsersView.vue'),
},
{
path:'addusers',
name:'addusers',
component:()=>import('../views/AddusersView.vue'),
}
/* {
path:'roles',
name:'roles',
component:()=>import('../views/RolesView.vue'),
},
{
path:'rights',
name:'rights',
component:()=>import('../views/RightsView.vue'),
},
{
path:'goods',
name:'goods',
component:()=>import('../views/GoodsView.vue'),
},
{
path:'params',
name:'params',
component:()=>import('../views/ParamsView.vue'),
},
{
path:'categories',
name:'categories',
component:()=>import('../views/CategoriesView.vue'),
},
{
path:'categories',
name:'categories',
component:()=>import('../views/CategoriesView.vue'),
},
{
path:'orders',
name:'ordes',
component:()=>import('../views/OrdersView.vue'),
},
{
path:'reports',
name:'reports',
component:()=>import('../views/ReportsView.vue'),
}, */
]
}
]
const router = new VueRouter({
routes
})
export default router
