解決：親がRouterに単一ファイルコンポーネントを導入しておらず、子の単一ファイルコンポーネントがページ上に表示できない問題

1. 問題の表示:

まず、問題の説明:

router親には未引入单文件组件他の設定を書き込むだけですが、そのchildren中に、単一のファイルコンポーネントをインポートします未能在页面中展示。

次に、コード:

// 某一块的静态路由管理
{
    
    
    path: '/contractManagement',
    component: Layout,
    name: 'contractManagement',
    redirect: 'VacationBalance',
    meta: {
    
     title: '合同管理', icon: 'el-icon-s-help' },
    children: [
      {
    
    
        path: 'VacationBalanceList',
        name: 'VacationBalanceList',
        // component: () => import('@/views/contractManagement'),
        meta: {
    
     title: '合同管理列表', icon: '' },
        children: [
          {
    
    
            path: 'CreateContract',
            name: 'CreateContract',
            component: () => import('@/views/contractManagement/CreateContract'),
            meta: {
    
     title: '创建合同', icon: '' }
          },
          {
    
    
            path: 'ContractDetail',
            name: 'ContractDetail',
            component: () => import('@/views/contractManagement/ContractDetail'),
            meta: {
    
     title: '合同详情', icon: '' }
          },
          {
    
    
            path: 'ContractEdit',
            name: 'ContractEdit',
            component: () => import('@/views/contractManagement/ContractEdit'),
            meta: {
    
     title: '编辑合同', icon: '' }
          },
          {
    
    
            path: 'AlarmManagement',
            name: 'AlarmManagement',
            component: () => import('@/views/contractManagement/AlarmManagement'),
            meta: {
    
     title: '告警管理', icon: '' }
          }
        ]
      }
    ]
  },

第三に、ページ表示:

(当然のことです。childrenインポートされたファイル、ページの空白部分应该展示は空白ではありません)

2. 問題分析:

インポートされたルーティングrouterの問題は、インポートされたパブリックのページcontractManagement表示プラットフォームに提供される必要があります。children<router-view />

3. 解決プロセス:

まず、親に単一ファイルコンポーネントを導入し、ページに表示されるルートを単一ファイルコンポーネントに記述しますchildren。

次に、次のコードは次contractManagementのとおりです。index.vue

<!-- 合同管理列表展示路由 -->
<template>
  <div>
    <router-view />
  </div>
</template>

第三に、この時点で、ページにchildrenは対応する。

(現時点では、ページには単一ファイル コンポーネントのコンテンツのみchildrenが表示され。これが望ましい結果です)

4 番目に、正しい宛先コードは次のとおりです。

// 某一块的静态路由管理
{
    
    
    path: '/contractManagement',
    component: Layout,
    name: 'contractManagement',
    redirect: 'VacationBalance',
    meta: {
    
     title: '合同管理', icon: 'el-icon-s-help' },
    children: [
      {
    
    
        path: 'VacationBalanceList',
        name: 'VacationBalanceList',
        component: () => import('@/views/contractManagement'),
        meta: {
    
     title: '合同管理列表', icon: '' },
        children: [
          {
    
    
            path: 'CreateContract',
            name: 'CreateContract',
            component: () => import('@/views/contractManagement/CreateContract'),
            meta: {
    
     title: '创建合同', icon: '' }
          },
          {
    
    
            path: 'ContractDetail',
            name: 'ContractDetail',
            component: () => import('@/views/contractManagement/ContractDetail'),
            meta: {
    
     title: '合同详情', icon: '' }
          },
          {
    
    
            path: 'ContractEdit',
            name: 'ContractEdit',
            component: () => import('@/views/contractManagement/ContractEdit'),
            meta: {
    
     title: '编辑合同', icon: '' }
          },
          {
    
    
            path: 'AlarmManagement',
            name: 'AlarmManagement',
            component: () => import('@/views/contractManagement/AlarmManagement'),
            meta: {
    
     title: '告警管理', icon: '' }
          }
        ]
      }
    ]
  },

contractManagement以下のコードは次のとおりindex.vueです。

<template>
  <div>
    <router-view />
  </div>
</template>

4. 概要:

まず、間違っている点や不適切な点がある場合は、指摘や交換をお願いします。
次に、興味がある場合は、このコラム (Vue (Vue2+Vue3) の面接必須コラム) にもっと注目してください。https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482