微服务项目：尚融宝（14）（前端平台：尚融宝管理系统路由配置）

认清现实，放弃幻想，准备斗争

一、组件定义

1、创建vue组件

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

2、core/integral-grade/list.vue

 3、core/integral-grade/form.vue

二、路由定义

修改 src/router/index.js 文件，重新定义constantRoutes，拷贝到 dashboard路由节点 下面

注意：每个路由的name不能相同

{
    path: '/core/integral-grade',
    component: Layout,
    redirect: '/core/integral-grade/list',
    name: 'coreIntegralGrade',
    meta: { title: '积分等级管理', icon: 'el-icon-s-marketing' },
    alwaysShow: true,
    children: [
      {
        path: 'list',
        name: 'coreIntegralGradeList',
        component: () => import('@/views/core/integral-grade/list'),
        meta: { title: '积分等级列表' }
      },
      {
        path: 'create',
        name: 'coreIntegralGradeCreate',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '新增积分等级' }
      },
      {
        path: 'edit/:id',
        name: 'coreIntegralGradeEdit',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '编辑积分等级' },
        hidden: true
      }
    ]
},

一、全栈开发流程

1、前端调用流程

下图是开发过程中涉及到和几个核心的模块，我们已经完成了路由的配置和页面组件的创建，接下来我们需要进一步完善页面组件的模板