Estoy ocupando Vue cli 

 Y he creado mi menu, Lo cual está así. 

[![introducir la descripción de la imagen aquí][1]][1]


ME muevo en esos dos botones que tengo ahorita y cuando accedo a productos tengo otro menu

[![introducir la descripción de la imagen aquí][2]][2]


que es crear, buscar, actualizar, listar, al darle crear si se muestra.


[![introducir la descripción de la imagen aquí][3]][3]


pero cuando quiero darle clic a buscar, actualizar o listar. me sale este error.


[![introducir la descripción de la imagen aquí][4]][4]


En realidad independientemente  de cual sea el primer que le de clic si se muestra, pero al darle clic en otro router link. no se muestra.

Mis rutas las tengo así

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    Vue.use(VueRouter)

      const routes = [
      {
        path: '/',
        name: 'home',
        component: ()=> import('../views/Home.vue')
      },
      {
        path: '/producto',
        name: 'producto',
        component: () => import('@/views/Productos/Producto.vue'),
        children:[
          {
            path: '/producto/crear',
            name:'crear-producto',
            component: () => import('@/views/Productos/Crear.vue')
          },
          {
            path:'/producto/listar',
            name:'listar-productos',
            component: () =>  import('@/views/Productos/Lista.vue')
          },
          {
            path:'/producto/actualizar-varios',
            name:'actualizar-varios',
            component: () => import('@/views/Productos/Actualizar.vue')
          },
          {
            path:'/producto/buscar',
            name:'buscar-producto',
            component: () => import('@/views/Productos/Buscar.vue')
          },
          {
            path:'/productos/importar',
            name:'importar-productos',
            component: () => import('@/views/Productos/Importar.vue')
          }
        ]
      }
      
    ]

<!-- end snippet -->


mis views están así

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <template>
      <div id="app" class="my-4 mx-4" >

          <div id="nav">
            <router-link class="btn btn-primary " :to="{name:'home'}">Inicio F1</router-link> 
            <router-link class="btn btn-primary mx-1" :to="{name:'producto'}">Productos F2</router-link>

          </div>

         <router-view > </router-view>

      </div>
    </template>



<!-- end snippet -->


Y en productos el principal está así

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <template>
        <div class=" my-5">
            <div class="row justify-content-center">
                <div class="col-md-2">
                    <div class="list-group">

                        <router-link class="list-group-item list-group-item-action" :to="{name:'crear-producto'}"> Crear </router-link>
                        <router-link class="list-group-item list-group-item-action" :to="{name:'buscar-producto'}"> Buscar</router-link>
                        <router-link class="list-group-item list-group-item-action" :to="{name:'actualizar-varios'}"> Actualizar Variós</router-link>
                        <router-link class="list-group-item list-group-item-action" :to="{name:'listar-productos'}"> Listar </router-link>      
        
                    </div> 

                </div>
                <div class="col-md-7 my-3">
                     <router-view ></router-view>
                </div>
            </div>
        </div>
    </template>

    <script>
    export default {
        name :'producto'

    }
    </script>

<!-- end snippet -->


Tengo un router view dentro de otro router view

les he puesto ya nombre y en las rutas  también les puse la relacion de que tiene cada router view con cada ruta y su componente 

Me he percatado.. de esto..


**Si Yo estoy en la ruta  principal 
http://localhost:8080/producto  Y si recargo si se muestra todo el menu,
 pero cuando accedo a http://localhost:8080/producto/crear   si se muestra, pero si recargo la pagina me dice que esa ruta no existe.** 

Esto pasa.

[![introducir la descripción de la imagen aquí][5]][5]


  [1]: https://i.sstatic.net/nAIGW.png
  [2]: https://i.sstatic.net/SXp1r.png
  [3]: https://i.sstatic.net/pFdQP.png
  [4]: https://i.sstatic.net/lQroO.png
  [5]: https://i.sstatic.net/9axJ5.png