0

Estoy ocupando Vue cli

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

introducir la descripción de la imagen aquí

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í

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

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

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í

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')
      }
    ]
  }
  
]

mis views están así

<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>

Y en productos el principal está así

<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>

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í

Algo más que me he percatado.

Si yo estoy en la ruta

/producto

introducir la descripción de la imagen aquí

Me cargan mis archivos Js <-----

pero si me muevo a buscar/ si me va cargar(porque es el primero que le dice clic)

Y se agrego un nuevo archivo JS introducir la descripción de la imagen aquí

ahora si me muevo a Crear/actualizar

Se crea una carpeta producto/js

introducir la descripción de la imagen aquí

Ahí ya mostró error.

(ahora entonces para que esto funcione) me di cuenta que nuevamente(recargando mi ruta principal)

/producto

Si le doy clic en Buscar/crear/Actualizar (la que sea primera) si se va mostrar

Todo perfecto hasta ahí

introducir la descripción de la imagen aquí

Ahora si regreso nuevamente a (INICIO) sin recargar la pagina y sin darle clic a otra opcion de mi menu productos()

al regresar a inicio y de nuevo volver a prouducto y doy clic en otra opcion del menú no me muestra error. entones para que mi menu funcione tengo que regresar a INICIO, VOLVER a producto y darle clic en la opcion que quiera. en si tengo que recargar el componente(Producto) pero no se que esta pasando ...

1
  • reemplaza <router-view > </router-view> por <router-view></router-view>
    – fredyfx
    Commented el 28 abr. 2020 a las 18:18

1 respuesta 1

0

También lo que podrías hacer es remplazar los :to="{name:'nombre'}":

<router-link class="list-group-item list-group-item-action" :to="{name:'crear-producto'}"> Crear </router-link>      

En vez de poner el name de la definido en el router, poner el nombre path definido en el router y quedaría de la siguiente manera:

<router-link class="list-group-item list-group-item-action" :to="/producto/crear"> Crear </router-link>

(Debería de funcionar)

1
  • es que en resumen la url /producto/crear si accedo directamente no la muestra Commented el 28 abr. 2020 a las 21:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.