Blog

Named views in Vue

23/05/2017

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.

También te puede gustar…

Caso de éxito: Binfluencer

Caso de éxito: Binfluencer

Binfluencer es otra de las empresas que ha confiado en ASPgems. En este caso de éxito te contamos nuestra colaboración con ellos.

ASPgems icon
C/ Sextante, 9
28023 Madrid,
España

Hablemos.

A %d blogueros les gusta esto: