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

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

    一、组件定义

    1、创建vue组件

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

    2、core/integral-grade/list.vue

    1. <template>
    2.   <div class="app-container">
    3.     积分等级列表
    4.   div>
    5. template>

     3、core/integral-grade/form.vue

    1. <template>
    2.   <div class="app-container">
    3.     积分等级表单
    4.   div>
    5. template>

    二、路由定义

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

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

    1. {
    2.     path: '/core/integral-grade',
    3.     component: Layout,
    4.     redirect: '/core/integral-grade/list',
    5.     name: 'coreIntegralGrade',
    6.     meta: { title: '积分等级管理', icon: 'el-icon-s-marketing' },
    7.     alwaysShow: true,
    8.     children: [
    9.       {
    10.         path: 'list',
    11.         name: 'coreIntegralGradeList',
    12.         component: () => import('@/views/core/integral-grade/list'),
    13.         meta: { title: '积分等级列表' }
    14.       },
    15.       {
    16.         path: 'create',
    17.         name: 'coreIntegralGradeCreate',
    18.         component: () => import('@/views/core/integral-grade/form'),
    19.         meta: { title: '新增积分等级' }
    20.       },
    21.       {
    22.         path: 'edit/:id',
    23.         name: 'coreIntegralGradeEdit',
    24.         component: () => import('@/views/core/integral-grade/form'),
    25.         meta: { title: '编辑积分等级' },
    26.         hidden: true
    27.       }
    28.     ]
    29. },

    一、全栈开发流程

    1、前端调用流程

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