10. 尚融宝管理系统路由配置

一、组件定义

1、创建vue组件

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

2、core/integral-grade/list.vue

<template>
  <div class="app-container">
    积分等级列表
  div>
template>

3、core/integral-grade/form.vue

<template>
  <div class="app-container">
    积分等级表单
  div>
template>

二、路由定义

1、修改 src/router/index.js 文件

  {
    // 父路由
    path: '/core/integral-grade',
    component: Layout,
    // 如果直接访问父路由，则会跳转到其下的list子路由
    redirect: '/core/integral-grade/list',
    name: 'coreIntegralGrade',
    meta: { title: '积分等级管理', icon: 'el-icon-s-marketing' },
    // 默认值false，当父节点只有一个子节点时，不显示父节点
    // true，任何时候都显示父节点
    alwaysShow: true, 
    children: [
      {
        // 子路由，父路由加上子路由即为一个真正的路由
        path: 'list',
        // 每个路由节点的name不能相同
        name: 'coreIntegralGradeList',
        // 执行template模板组件
        component: () => import('@/views/core/integral-grade/list'),
        // 定义导航标题
        meta: { title: '积分等级列表' }
      },
      {
        path: 'create',
        name: 'coreIntegralGradeCreate',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '新增积分等级' }
      },
      {
        // :id 是一个占位符，表示这部分url会是任何一个id
        path: 'edit/:id', 
        name: 'coreIntegralGradeEdit',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '编辑积分等级' },
        hidden: true
      }
    ]
},

2、测试