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

<template>
    <div class="box">
        <el-container>
            <el-aside>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect">
                    <router-link to="/nodeDetail/synchronization"><el-menu-item index="1" border>节点基本信息</el-menu-item></router-link>
                    <router-link to="/nodeDetail/bookkeeping"><el-menu-item index="2">节点配置信息</el-menu-item></router-link>
                </el-menu>
            </el-aside>
            <el-main>
                <el-col :span="24">
                    <router-view></router-view>
                </el-col>
            </el-main>
        </el-container>
    </div>
</template>

展示如下

image.png