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.