Storyboard

>Modelo

ID:(1251, 0)

Concepto

>Top

Si la página inicial se define como index.vue y se almacena en la raiz de la carpeta pages entonces el primer ingreso en el archivo routes tiene un path vacio, se define el acceso al layout correspondiente y eventualmente se agregan las paginas dependientes como children:

```

// we define our routes in this file

import DemoLayout from 'layouts/demolayout'

const routes = [

{

path: '',

component: DemoLayout

}

]

export default routes

```

Si el archivo inicial se encuentra en otra carpeta/tiene otro nombre debe adecuarse la dirección en path acorde a ello.

ID:(9773, 0)

Concepto

>Top

El archivo router.js tiene un formato de la forma:

```

// src/router/routes.js

import DemoLayout from 'layouts/demolayout'

import Profile from 'layouts/profilelayout'

import Posts from 'layouts/postslayout'

const routes = [

{

path: 'code',

// we use /src/layouts/demolayout component which is imported above

component: DemoLayout,

// hey, it has children routes and User has in it;

// It is really a Layout then!

children: [

// Profile page

{

path: 'profile', // here it is, route /code/profile

component: Profile // we reference /src/layouts/profilelayout.vue imported above

},

// Posts page

{

path: 'posts', // here it is, route /code/posts

component: Posts // we reference /src/layout/postslayout.vue imported above

}

]

}

]

routes.push(otherpage)

routes.push({ path: '*', component: () => import('pages/error404.vue') })

export default routes

```

donde otherpage es otra pagina con layout y paginas asociadas y finalmente se agrega una pagina error para el caso de que el sistema no logra localizar la página.

ID:(9770, 0)

Concepto

>Top

En la carpeta pages se debe incluir la página error.vue con la que el sistema responde si se solicita cargar una página inexistente.
Dicha página tiene que ser de la forma:
```

```

ID:(9771, 0)

Concepto

>Top

Para agregar una pagina demopage.vue, con un layout demolayout se puede primero importar y luego cargar:

```

// we define our routes in this file

import DemoLayout from 'layouts/demolayout'

const routes = [

{

path: '/demopage',

component: DemoLayout

}

]

export default routes

```

o importar en el mismo proceso de cargar (lazy-loading / on-demand loading):

```

// we define our routes in this file

const routes = [

{

path: '/demopage',

component: () => import('layouts/demolayout')

}

]

export default routes

```

ID:(9772, 0)