路由配置:
import Vue from 'vue' import VueRouter from 'vue-router' // 父组件引入 import HomeView from '@/views/HomeView.vue' import QualityAna from '@/views/QualityAna.vue' import ManuProMan from '@/views/ManuProMan.vue' import PalletMan from '@/views/PalletMan.vue' import WorkOrderMan from '@/views/WorkOrderMan.vue' import KanBanMan from '@/views/KanBanMan.vue' import TraceMan from '@/views/TraceMan.vue' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/homeview' }, { path: '/homeview', component: HomeView, child: [ { path: '/qualityana', component: QualityAna }, { path: '/manuproman', component: ManuProMan }, { path: '/palletman', component: PalletMan }, { path: '/workorderman', component: WorkOrderMan }, { path: '/kanbanman', component: KanBanMan }, { path: '/traceman', component: TraceMan } ] }
HomeView.vue
<div class="container"> <div class="row row-cols-3"> <div class="col"> <router-link to="/qualityana">质量分析</router-link> </div> <div class="col"> <router-link to="/manuproman">生产工艺管理</router-link> </div> <div class="col"> <router-link to="/palletman">托盘管理</router-link> </div> <div class="col"> <router-link to="/workorderman">工单管理</router-link> </div> <div class="col"> <router-link to="/kanbanman">看板管理</router-link> </div> <div class="col"> <router-link to="/traceman">追溯管理</router-link> </div> </div> <router-view></router-view> </div>
QualityAna.vue
<template> <div class="com-page"> <!-- TODO_03:子组件引入 --> <LineYield>111</LineYield> <RepairLineYield>返修产线良率</RepairLineYield> <RepairStationYield>返修工位良率</RepairStationYield> <StationYield>工站良率</StationYield> <PalletYield>托盘良率</PalletYield> </div> </template> <script> // TODO_01:导入子组件 import LineYield from '@/components/BasicData/QualityAnaSubComponents/LineYield.vue' import PalletYield from '@/components/BasicData/QualityAnaSubComponents/PalletYield.vue' import RepairLineYield from '@/components/BasicData/QualityAnaSubComponents/RepairLineYield.vue' import RepairStationYield from '@/components/BasicData/QualityAnaSubComponents/RepairStationYield.vue' import StationYield from '@/components/BasicData/QualityAnaSubComponents/StationYield.vue' export default { // TODO_02:注册 components: { LineYield, PalletYield, RepairLineYield, RepairStationYield, StationYield },
LineYield.vue
<template> <div class="com-container"> <!-- 真正显示图表的盒子 --> <!-- ref vue中获取dom元素的属性 --> <div class="com-chart" ref="lineyield_ref">我是图表</div> </div> </template>
跳转到/qualityana页面什么也不显示,你在QualityAna.vue的DOM中随便写一个文字,看看页面是否显示,不是子组件不显示,怀疑是你的路由配置不对,你是否使用了嵌套路由