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

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

doctype html
html
  head
    title Contacto
  body
    a(href='#') Enlace a home

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');
});

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:

• http://localhost:3000/home
• http://localhost:3000/contact

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

Y en home:

a(href='contact') Enlace a Contactos

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.