vue三级菜单渲染_vue权限菜单渲染

权限菜单

1.将所有的页面都配置好 包括path componet

由于各个账户的权限不同,所以权限菜单不一样,对应的页面也不一样,所以应该按照配置最高权限的页面配置来配置我们的路由

代码角度步骤应当是:

1.搭建页面所有菜单的路由

​ 2.根据后台返回的数据生成所需要的路由

​ 3.通过addRoutes方法,动态添加到路由

1.1项目结构src

│ App.vue

│ main.js

│

├─api

│ index.js

│

├─assets

│ el-reset.css

│ global.css

│

├─components

│ submenu.vue

│

├─pages

│ │ Login.vue

│ │ page404.vue

│ │

│ └─Home

│ │ index.vue

│ │

│ ├─Attendance

│ │ index.vue

│ │

│ ├─Mine

│ │ index.vue

│ │

│ ├─Statistics

│ │ index.vue

│ │

│ ├─Student

│ │ Detail.vue

│ │ Dormitory.vue

│ │ index.vue

│ │ Product.vue

│ │

│ ├─Users

│ │ index.vue

│ │

│ └─Welcome

│ index.vue

│

├─router

│ allRoutes.js

│ index.js

│

└─store

index.js

1.2定义全部的路由和组件

这些路由都是后期通过和后端菜单数据对比,选择需要的;配置完当前的文件必须确保配置是生效的

调试过程:

1.在router/index.js 引入 allRoutes

2.由于allRoutes就是一个路由配置项,所以直接加到 home路由配置的children属性上

3.访问配置的路由,看是否生效

const Welcome = () => import("../pages/Home/Welcome")

const Student = () => import("../pages/Home/Student")

const Detail = () => import("../pages/Home/Student/Detail")

const Product = () => import("../pages/Home/Student/Product")

const Dormitory = () => import("../pages/Home/Student/Dormitory")

const Mine = () => import("../pages/Home/Mine")

const Statistics = () => import("../pages/Home/Statistics")

const Attendance = () => import("../pages/Home/Attendance")

const Users = () => import("../pages/Home/Users")

const allRou