DEV Community

Maximiliano Burgos
Maximiliano Burgos

Posted on • Updated on

Como enlazar vistas en Pug con ExpressJS

Para poder implementar vistas en ExpressJS, te recomiendo pasar por este artículo primero antes de continuar.

Ya domino el armado de vistas, dame algo mas difícil!

Cuando llamamos a las vistas a través del ruteo de ExpressJS usando pug, nos limitamos a hacerlo sobre una única página. Es lógico pensar que para crear mas vistas, debemos establecer rutas nuevas y llamarlas mediante la url. Pero armando un sitio web, necesitamos que esas urls se puedan llamar directamente desde enlaces en las vistas.

Empecemos armando las vistas!

Home y Contacto

Crearemos dos vistas pug. Una vista home (views/home.pug):

doctype html
html
  head
    title Home
  body
    a(href='#') Enlace a contacto
Enter fullscreen mode Exit fullscreen mode

Y una vista Contacto (views/contact.pug):

doctype html
html
  head
    title Contacto
  body
    a(href='#') Enlace a home
Enter fullscreen mode Exit fullscreen mode

Luego crearemos una ruta para cada vista:

app.get('/home', function (req, res) {
  res.render('home');
});

app.get('/contact', function (req, res) {
  res.render('contact');
});
Enter fullscreen mode Exit fullscreen mode

La vista home debe enlazar a contacto mediante un link y viceversa. Y como estamos dentro del contexto de nuestro servidor, las url que generamos son:

Entonces para poder usar dicha ruta en nuestras vistas, es tan simple como cambiar el href de nuestros links. Por ejemplo en contact:

a(href='home') Enlace a home
Enter fullscreen mode Exit fullscreen mode

Y en home:

a(href='contact') Enlace a Contactos
Enter fullscreen mode Exit fullscreen mode

No necesitamos ni recomendamos usar la url completa dado que puede cambiar tanto de puerto como dirección.

Como ven es muy sencillo, y podemos enlazar todas las vistas que queramos siempre que tengamos el ruteo adecuado en nuestro index.js.

Top comments (0)