vue router children子路由整理

1.路由配置

router---index.js页面

import synchronization from '@/components/backstageControl/nodeDetail/synchronization' // 节点列表-》(节点详情)同步节点
import nodeDetail from '@/components/backstageControl/nodeDetail/detail' // 节点列表-》(节点详情)同步节点
import bookkeeping from '@/components/backstageControl/nodeDetail/bookkeeping' // 节点列表-》(节点详情)同步节点

export default new Router({
  mode: 'history',
  routes: [
 {
      path: '/nodeDetail', // 后台管理-》节点详情
      name: 'nodeDetail',
      component: nodeDetail,
      children: [
        { // 二级路由
          path: '/nodeDetail/synchronization', // 后台管理-》同步节点
          name: 'synchronization',
          component: synchronization
        },
        {
          path: '/nodeDetail/bookkeeping',
          name: 'bookkeeping',
          component: bookkeeping
        }
      ]
    }
  ]
})

页面布局

image.png

父页面样式

image.png

展示如下

image.png