vue-router 路由跳轉(zhuǎn)后沒有加載組件

router.js 路由部分

export const normalRouter = {
    path: '/',
    meta: {
      login: false
    },
    component: () => import('@/views/normal/home'),
    redirect: '/pagelist',
    children: [
      {
        name: 'normalPageList',
        component: () => import('@/views/normal/pagelist'),
        path: 'pagelist',
        meta: {
          login: false,
          title: '首頁'
        },
        
      },
      {
        name: 'normalTagList',
        path: 'categories',
        meta: {
          login: false,
          title: '分類'
        },
        components: () => import('@/views/normal/tagList')
      },
      {
        name: 'normalmyPageList',
        path: 'myPageList',
        meta: {
          login: true,
          title: '歸檔'
        },
        components: () => import('@/views/normal/myPageList')
      },
      {
        name: 'normalGuestBook',
        components: () => import('@/views/normal/guestBook'),
        path: 'guestbook',
        meta: {
          login: true,
          title: '留言'
        },
        
      }
    ]
}

header組件 blogHeader.vue

<div class="site-nav">
    <ul class="menu">
        <li v-for="(route, i) in routes.children" :key="i" class="menu-item">
            <router-link :to="{name: route.name}">{{ route.meta.title }}</router-link>
        </li>
    </ul>
    <div class="site-search">
        <form class="site-search-form">
            <Icon type="search" class="search-icon" size="22" color="#222"></Icon>
            <input class="search-input"></input>
        </form>
    </div>
</div>

顯示頁面 home.vue

<Layout :style="{minHeight: '100vh'}">
  <Header :style="{padding: 0, background: '#f5f5f5', height: 'auto'}" class="layout-header-bar">
    <blog-header @on-change="handleRouter"></blog-header>
  </Header>
  <Content :style="{background: '#fff', minHeight: '260px'}">
      <router-view :style="{marginTop: '80px auto 0', width: '90%'}"></router-view>
      <!-- <router-view></router-view> -->
  </Content>
</Layout>