为了防止接口异常,在上一章的基础上创建一个mork文件夹写了个menu.json放入public文件里：
Element官网：https://element.eleme.cn/#/zh-CN/guide/design
{
"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：
view下IndexView.vue:
//这里做了点改动，相比上一章这里采取动态路由来获取侧边栏以及二级菜单：
相关注意点已用注释表明：
:default-openeds="openList" :router="true" :default-active="pagepath" :unique-opened="true" > :index="(i + 1).toString()" v-for="(v, i) in navList" :key="i" >
>{{ v.authName }}
> :index="'/index/' + item.path" v-for="(item, index) in v.children" :key="index" > {{ item.authName }} 王小虎 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 router下路由配置：采取动态路由，之前的注释掉了：
views下跳转的AddcategoriesView.vue:
添加分类
效果图：
代码目录：