一、后台系统路由实现分析

1、入口文件中调用路由

src/main.js

......
import router from './router' //引入路由模块
  ......
  new Vue({
    el: '#app',
    router, //挂载路由
    store,
    render: h => h(App)
})

2、路由模块中定义路由

src/router/index.js

......
export const constantRouterMap = [
  ......
]
export default new Router({
  ......
  routes: constantRouterMap
})

二、谷粒学院路由定义

1、复制icon图标

将vue-element-admin/src/icons/svg 中的图标复制到 guli-admin项目中

2、修改路由

修改 src/router/index.js 文件，重新定义constantRouterMap
注意：每个路由的name不能相同

export const constantRouterMap = [
{ path: '/login', component: () => import('@/views/login/index'), hidden: true },
{ path: '/404', component: () => import('@/views/404'), hidden: true },

// 首页
{
  path: '/',
  component: Layout,
    redirect: '/dashboard',
 name: 'Dashboard',
 children: [{
   path: 'dashboard',
   component: () => import('@/views/dashboard/index'),
   meta: { title: '谷粒学院后台首页', icon: 'dashboard' }
 }]
},

// 讲师管理
{
 path: '/edu/teacher',
 component: Layout,
 redirect: '/edu/teacher/list',
 name: 'Teacher',
 meta: { title: '讲师管理', icon: 'peoples' },
 children: [
   {
     path: 'list',
     name: 'EduTeacherList',
     component: () => import('@/views/edu/teacher/list'),
     meta: { title: '讲师列表' }
   },
   {
     path: 'create',
     name: 'EduTeacherCreate',
     component: () => import('@/views/edu/teacher/form'),
     meta: { title: '添加讲师' }
   },
   {
     path: 'edit/:id',
     name: 'EduTeacherEdit',
     component: () => import('@/views/edu/teacher/form'),
     meta: { title: '编辑讲师', noCache: true },
     hidden: true
   }
 ]
},

{ path: '*', redirect: '/404', hidden: true }
]

3、创建vue组件

在src/views文件夹下创建以下文件夹和文件

4、form.vue

<template>
  <div class="app-container">
    讲师表单
  </div>
</template>

5、list.vue

<template>
  <div class="app-container">
    讲师列表
  </div>
</template>