动态路由和静态路由/页面权限控制一.路由静态路由不需要权限就可以访问的页面动态路由需要权限访问的页面 1.拆分静

一.路由

静态路由 不需要权限就可以访问的页面

动态路由 需要权限访问的页面

1.拆分静态路由和动态路由

图一

2.准备页面

批量创建 mkdir 文件名文件名

3.模块化路由

批量创建js touch

4.配置路由


// 公共布局
import Layout from '@/layout'

export default {
  path: '/employees',
  component: Layout,
  children: [
    // 员工列表
    {
      path: '', // 空或和父路由路径一样会被默认加载
      name: 'employees', // 权限的标识
      component: () => import('@/views/employees/index'),
      // 配置左侧菜单信息
      meta: {
        title: '员工管理', // 菜单名字
        icon: 'people' // 菜单图标
      }
    },
    // 某个员工详情
    {
      path: '/employees/detail/:id',
      component: () => import('@/views/employees/detail'),
      hidden: true, // 不在左侧菜单显示
      meta: {
        title: '员工详情'
      }
    }
  ]
}