vue.js创建网站实例7

vue-admin-template使用动态路由，根据权限显示左侧菜单，涉及到要修改的文件有：

src/permission.js
src/store/modules/permission.js
src/store/modules/user.js
src/store/modules/errorLog.js
src/store/modules/tagsView.js
src/store/getters.js
src/store/index.js
src/router/index.js
src/layout/components/Sidebar/index.vue

上述文件直接从vue-element-admin复制就行

其中，修改 src/router/index.js 中的菜单即可，权限设置：

根据 vue-router官方推荐 的方法通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: ['admin','super_editor'] }表示该页面只有admin和超级编辑才能有资格进入，例如：

{
    path: '/classinfo',
    component: Layout,
    redirect: '/classinfo',
    name: '班级管理',
    meta: { title: '班级管理', icon: 'el-icon-s-help', roles: ['admin', 'teacher'] },
    children: [
      {
        path: 'classinfo',
        name: '班级信息',
        component: () => import('@/views/classinfo/index'),
        meta: { title: '班级信息', icon: 'table' }
      },
      {
        path: 'addclass',
        name: '添加班级',
        component: () => import('@/views/classinfo/addclass'),
        meta: { title: '添加班级', icon: 'form' }
      }
    ]
  },

子菜单可以单独设置权限，如果不设置，会继承上级菜单的权限

还需修改src/store/modules/permission.js，可以进一步细化管理员权限

 

注意事项：这里有一个需要非常注意的地方就是 404 页面一定要最后加载，如果放在constantRouterMap一同声明了404，后面的所以页面都会被拦截到404，详细的问题见addRoutes when you've got a wildcard route for 404s does not work

备注：后台返回json：

{"code":20000,"data":{"roles":["teacher"],"introduction":"aaa","avatar":null,"name":"aaa"}}

• vue.js创建网站实例1
• vue.js创建网站实例2
• vue.js创建网站实例3
• vue.js创建网站实例4
• vue.js创建网站实例5
• vue.js创建网站实例6
• vue.js创建网站示例7