PokemonLayout - Tylung/vue-apuntes GitHub Wiki

Los layouts son componentes totalmente corrientes de vue pero que cuentan con el router-view, por lo cual apareceran en cada una de las rutas de mi app, al menos que manejemos las rutas hijas, que son las rutas que cuelgan de una ruta principal, en este caso de pokemon.

Por ejemplo para ir al home de pokemon habra que poner la ruta /pokemon/home.

Archivo: src/modules/pokemon/layouts/PokemonLayout.vue

<template>
  <div class="pokemon-layout">
    <h1>Pokemon Layout</h1>
    <router-view></router-view>
  </div>
</template>

<style scoped>
.pokemon-layout {
    background-color: #ffebcd;
}
</style> 

Archivo: src/router/router.js

El array children es el que contiene las rutas hijas y no se coloca el '/' en las rutas hijas, porque no cuelgan de '/' sino de '/pokemon' y solo se coloca el nombre, por ejemplo 'home'

    {
	path: '/',
	redirect: '/pokemon',
    },
    {
	path: '/pokemon',
	component: () =>import( /* webpackChunkName: 'PokemonLayout' */ '@/modules/pokemon/layouts/PokemonLayout'),
	    children: [
		    	{
			    	path: 'home',
				    name: 'pokemon-home',
				    component: () =>
					    import(/* webpackChunkName: 'ListPage'*/ '@/modules/pokemon/pages/ListPage')
                       }
                      ...
                  ]
    }

Y si la ruta que se coloca no se encuentra en las rutas hijas se puede agregar la ruta con path: '', que sera el default en el router-view de pokemon

 children: [
    {
	path: 'home',
	name: 'pokemon-home',
	component: () =>
	import(/* webpackChunkName: 'ListPage'*/ '@/modules/pokemon/pages/ListPage')
    }   
   ....
    {
	path: '',
	redirect: { name: 'pokemon-about' }
    }
]