El blog de ASPgems

Siguiendo el día a día de ASPgems

Named views in Vue

Vue router es el componente principal para el manejo de rutas en Vue, es muy potente y tiene una gran documentación que puedes consultar aquí.

Estamos desarrollando una aplicación con la siguiente estructura:

Layout de la app

Esta es una estructura muy común que habrás visto en muchas aplicaciones. Tenemos un sidebar y un view principal y ambos cambian el contenido de su interior dependiendo de la URL en la que nos encontremos.

Si estás familiarizado con el router de Vue sabrás que tiene una etiqueta router-view que funciona como un marco o contenedor donde los componentes son mostrados en ella si su URL encaja. Si no lo has utilizado antes, te aconsejamos que le eches un vistazo aquí.

Esto es muy útil pero no resuelve el problema cuando tenemos dos vistas que no son anidadas.

Para solventar este problema el router de vue nos facilita una característica llamada named views. Esta característica nos permite tener más de un router view en cada entrada de routing, y mapearlos con distintos componentes.

...

...

En nuestro fichero layout tenemos definidos dos router views, el primero de ellos tiene un atributo name con valor sidebar, el otro view es el router view por defecto.

export default new VueRouter({
  routes: [
    {
      path: '/',
      component: load('Layouts/Layout'),
      children: [
        {
          name: 'Courses',
          path: '/courses',
          components: {
            default: load('Course/CoursesList')
          }
        },
        {
          name: 'CourseEdit',
          path: '/course-edit/:id',
          components: {
            default: load('Course/CourseEdit')
 sidebar: load(Layout/Sidebar)
          },
          props: {
            default: true
          }
        }
      ]
    },
... 

Como podemos ver en nuestro fichero de routing tenemos dos entradas, ahora tenemos que mapear los componentes con las router views.

Si la etiqueta router-view no tiene nombre, es considerada como default.

En la primera entrada de routing tan solo cargamos el componente CourseList en el router-view principal, en este caso no tendremos sidebar.

En el segundo caso tenemos un componente Sidebar cargado en el view sidebar y un componente CourseEdit cargado en el router-view principal.

Podemos definir tantos router-views como queramos y cargar en ellos los componentes que creamos adecuados en base a la URL en la que nos encontremos.

Finalmente si estás usando parámetros en la URL como props en los componentes, puedes hacerlo del siguiente modo:

...
props: {
   default: true,
   Sidebar: true
}
... 

Tendrás que definir id en el array de props del componente, y podrás obtener el valor del id en él.

Esperamos que os sea de ayuda.

Añadir nuevo comentario

Desarrollo Web

Desarrollo Web
Co-creamos con nuestros clientes las mejores soluciones ágiles.

Etiquetas

Artículos relacionados

Nuestra revista

View my Flipboard Magazine