上接：vue-admin-template 添加商品页面（含增删改查功能）

说明

添加左侧菜单（路由）

修改下面文件：

src/router/index.js

一级菜单打开网页

点击 一级菜单 登记，即可打开网页，效果如下图：

代码

{
  path: '/checkin',
  component: Layout,
  children: [
    {
      path: 'index',
      name: 'checkin',
      component: () => import('@/views/checkin/index'),
      meta: { title: '登记', icon: 'link' }
    }
  ]
},

二级菜单打开页面

有二级菜单，点击 二级菜单 患者列表 打开页面

注意： 有多个二级路由时，才会 折叠菜单

如下图：

代码

注意： 有多个二级路由时，才会 折叠菜单

{
  path: '/patient', // 一级路由路径
  component: Layout,
  redirect: '/patient/list', // 重定向（跳转），访问该一级路由时，重定向到 二级路由-列表页面
  name: 'Patient',
  meta: { title: '患者管理', icon: 'el-icon-s-help' }, // 菜单显示的内容
  children: [
    {
      path: 'list',// 二级路由路径
      name: 'PatientList', // 一级路由path_二级路由path，防止路由重复。以后上班，按照公司的套路走
      component: () => import('@/views/patient/list.vue'),
      meta: { title: '患者列表', icon: 'link' }
    },
    { // 加上第二个二级路由，是为了让菜单展开，为了看到此效果，真正开发时，不需要加
      path: 'list2',
      name: 'PatientList2', // 一级路由path_二级路由path，防止路由重复。以后上班，按照公司的套路走
      component: () => import('@/views/patient/list.vue'),
      meta: { title: '治愈列表', icon: 'link' }
    }
  ]
}

一级路由 redirect 的作用

点击下图 红框 患者管理 时，可以重定向到到 二级路由