能不能捋一捋思路，代码是对的，思路有点混乱，不知哪句代码起到的效果

<template>
  <div id="app" class="g-container">
    <div class="g-view-container">
      <router-view></router-view>
    </div>
    <div class="g-footer-container">
      <c-tabbar></c-tabbar>
    </div>
  </div>
</template>

<script>
  import CTabbar from 'components/tabbar';

  export default {
    name: 'App',
    components:{
      'c-tabbar':CTabbar
    }
  };
</script>

import Vue from 'vue';
import Router from 'vue-router';
// import Home from 'pages/home';
// import Category from 'pages/category';
// import Cart from 'pages/cart';
// import Personal from 'pages/personal';
// import Search from 'pages/search';
// import Product from 'pages/product';

Vue.use(Router);

const routes = [
  {
    name: 'home',
    path: '/home',
    component: () => import('pages/home'),
    children: [
      {
        name: 'home-product',
        path: 'product/:id',
        component: () => import('pages/product')
      }
    ]
  },
  {
    name: 'category',
    path: '/category',
    component: () => import('pages/category')
  },
  {
    name: 'cart',
    path: '/cart',
    component: () => import('pages/cart')
  },
  {
    name: 'personal',
    path: '/personal',
    component: () => import('pages/personal')
  },
  {
    name: 'search',
    path: '/search',
    component: () => import('pages/search')
  },
  {
    path: '*',
    redirect: '/home'
  }
];

export default new Router({
  routes
});

为什么只有cart、home、personal、category四个页面传入了app.vue中的<router-view></router-view>

而另两个search，product却没有下面的<c-tabbar></c-tabbar>