2

recién comencé a utilizar vue.js y vue-router en una pequeña SPA, y tengo un problema al estructurar mi árbol de rutas.. primeramente tengo un componente padre, el cual básicamente tengo dos componentes hijos que son mi menú de navegación y footer, dentro de este componente padre de nombre Full.vue quiero que se renderizen todas mis rutas, dejo el código de este para que se entienda mejor:

<template>
  <div id="app" >
    <AppHeader/>
      <router-view/>
    <AppFooter/>
  </div>
</template>

<script>
  import { AppHeader, AppFooter } from '../components/'

  export default {
    name: 'full',
    components: {
      AppHeader,
      AppFooter
    }
  }  
</script>

y mi archivo de rutas luce de la siguiente manera:

import Full from './containers/Full.vue'
import Home './views/Home.vue'
import User from './views/User.vue'
import UserEdit from './views/UserEdit.vue'

export default [
  {
    path: '/',
    name: 'Home',
    redirect: '/dashboard',
    component: Full,
    meta: { requiresAuth: true },
    children: [
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard
      },
      {
        path: '/user',
        name: 'User',
        component: User,
        children: [
          {
            path: '/edit/:id',
            name: 'UserEdit',
            components: UserEdit,
            props: true,
          }
        ]  
      }
   ]

como ven en dentro mis rutas, específicamente en mi ruta de USER tengo una ruta hija a la que le paso un parámetro para trabajar con el dentro de mi componente, mi problema es que esta ruta hija no se renderiza de forma adecuada, ya que dentro de mi componente de menu de navegación y footer tengo algunas imagenes como logos etc, y justo cuando me dirijo hacia esta ruta, todas estas imagenes se rompen.. como soy nuevo nose si esta es la manera de estructurar mis rutas entre padres e hijas, cual seria la forma correcta de hacerlo?

3
  • Los componentes por si solos se renderizan bien? es solo cuando usas el router?
    – gbianchi
    el 21 feb. 2018 a las 15:32
  • si se renderizan correctamente.. también en mis rutas de '/dashboard' y mi ruta '/user', el problema sucede cuando me dirigo a '/edit/:id'
    – max
    el 21 feb. 2018 a las 15:36
  • ah perfecto, no son las rutas de ese componente, si no la de los componentes que ya estaban en la vista.
    – gbianchi
    el 21 feb. 2018 a las 15:50

1 respuesta 1

0

Tenés que borrarles a las subrutas la /

export default [
  {
    path: '/',
    name: 'Home',
    redirect: '/dashboard',
    component: Full,
    meta: { requiresAuth: true },
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: Dashboard
      },
      {
        path: 'user',
        name: 'User',
        component: User,
        children: [
          {
            path: 'edit/:id',
            name: 'UserEdit',
            components: UserEdit,
            props: true,
          }
        ]  
      }
   ]

Obviamente no lo probé pero debería funcionar bien ahora
Acá lo tenés bastante bien explicado y está en español Documentacion

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.