SVELTE, Sistema de rutas

Publicada el por

Sistema de rutas en Svelte

Como ocurre con otros frameworks, Svelte también tiene un sistema de rutas para la creación de SPA (Single Page Applications).

A continuación veremos algunas de las múltiples opciones que podemos usar para tener nuestro sistema de rutas:

  • Sapper:  Es un framework para crear aplicaciones web de alto rendimiento. No he tenido la oportunidad de usarlo pero según indican en su web, se han inspirado en Next.js de React para el desarrollo.
  • svelte-spa-router: Es una librería muy simple y que me recuerda bastante al sistema de rutas de Vue.

Para nuestros ejemplos usaremos esta última librería, ya que la sintaxis es muy simple y como dije antes me recuerda bastante al sistema de rutas que ofrece Vue, con el cual me siento bastante cómodo.

Lo primero que necesitamos es instalar la librería y para ello usaremos la linea de comandos.

npm install svelte-spa-router

Una vez terminada la instalación ya podemos empezar a realizar nuestras pruebas.

Empecemos a programar

Lo primero que haremos es descargar desde Github el código que hemos generado en los temas anteriores.

A continuación vamos a crear un menú para probar el sistema de rutas que nos ofrece la librería svelte-spa-router.

...
<div class="menu">
   <ul>
      <li><a>Opción 1</a></li>
      <li><a>Opción 2</a></li>
      <li><a>Opción 3</a></li>
      <li><a>Opción 4</a></li>
      <li><a>Opción 5</a></li>
   </ul>
</div>
...
<style>
...
.menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   text-align: left;
   display: flex;
}
.menu ul li {
   width: 25%;
   text-align: center;
   cursor: pointer;
   transition: 300ms ease-in-out;
   margin: 5px;
   padding: 5px;
}
.menu ul li:hover {
   background-color: #0e4efd;
   color: #ffffff;
   font-weight: bold;
   transition: 300ms ease-in-out;
}
...
</style>

Una vez creado el menú, necesitaremos crear las páginas sobre las que realizaremos la navegación y así comprobar que todo funciona correctamente.

Para ello crearemos un fichero por cada opción del menú mas otro fichero que se mostrara cuando intentemos acceder a una ruta que no exista.

El siguiente paso que debemos realizar, es la creación de un fichero donde se definirán todas las rutas de nuestra aplicación.

routes.js

import op1 from './pages/opcion1.svelte';
import op2 from './pages/opcion2.svelte';
import op3 from './pages/opcion3.svelte';
import op4 from './pages/opcion4.svelte';
import op5 from './pages/opcion5.svelte';
import error from './pages/error.svelte';

const routes = {
  '/op1': op1,
  '/op2': op2,
  '/op3': op3,
  '/op4': op4,
  '/op5': op5,
  '*': error
};

export default routes;

Como podemos observar el código para definir las rutas es bastante simple.

Lo primero que debemos hacer es importar cada una de las «vistas» sobre las que necesitamos realizar la navegación.

El siguiente paso sera definir las rutas usando un objeto donde indiquemos la ruta y la «vista» asociada a esa ruta.

Y para terminar exportaremos las rutas para usarlas en nuestra aplicación.

De esta forma ya tenemos nuestro sistema de rutas y la base para tener nuestra SPA (Single Page Aplication).

A continuación necesitamos importar la librería y nuestro fichero con las rutas para usarlo en nuestra aplicación.

App.svelte

<script>
...
import Router from 'svelte-spa-router';
import routes from './routes';
...
</script>
...
<div class="card">
   <h1>SVELTE ROUTER</h1>
   <div class="menu">
      <ul>
         <li><a>Opción 1</a></li>
         <li><a>Opción 2</a></li>
         <li><a>Opción 3</a></li>
         <li><a>Opción 4</a></li>
         <li><a>Opción 5</a></li>
      </ul>
    </div>
    <hr>
    <!-- Si la variable se llama igual que la propiedad,Svelte nos permite usar solo el nombre -->
    <Router {routes} />
    <!--
       Esto sería la otra forma
       <Router routes="{routes}" /> 
    -->
    <hr>
</div>
...

Todavía falta añadir algo de código para que sea funcional, pero en el siguiente vídeo podemos ver el resultado de integrar la librería en nuestro proyecto.

Para realizar el siguiente paso necesitamos añadir el código necesario para realizar la navegación desde la página, ya que ahora funciona cuando nosotros modificamos la URL de forma manual.

Si queremos realizar la navegación mediante Javascript, la librería svelte-spa-router nos ofrece link, push, pop y replace para realizar esa navegación.

La sintaxis para cada una es la siguiente:

  • link: Nos permite realizar la navegación dentro de un tag de HTML.
  • push(): Realiza la navegación a la ruta indicada como parámetro, añadiendo la ruta a la pila de historial del navegador.
  • pop(): El comportamiento sería el equivalente a el botón volver atras, eliminado la ruta de la pila de historial del navegador.
  • replace(): Realiza la navegación pero no añade la ruta a la pila de historial del navegador.

 

<script>
...
const goPage = (evt) => {
  const page = evt.detail.page;
  push(`/${page}`)
};
...
</script>
...
<div class="card">
   <h1>SVELTE ROUTER</h1>
   <div class="menu">
      <hr>
      <ul>
         <li><a href="/op1" use:link>Opción 1</a></li>
     <li><a href="/op2" use:link>Opción 2</a></li>
     <li><a href="/op3" use:link>Opción 3</a></li>
     <li><a href="/op4" use:link>Opción 4</a></li>
     <li><a href="/op5" use:link>Opción 5</a></li>
      </ul>
      <hr>
      <ul>
         <li>
       <PsButton text="Opción 1" type="default" on:click-evt={goPage} page="op1">
         <span slot="info-text" class="btn-special" />
       </PsButton>
     </li>
     <li>
       <PsButton text="Opción 2" type="default" on:click-evt={goPage} page="op2">
         <span slot="info-text" class="btn-special" />
       </PsButton>
     </li>
     <li>
       <PsButton text="Opción 3" type="default" on:click-evt={goPage} page="op3">
         <span slot="info-text" class="btn-special" />
       </PsButton>
     </li>
         <li>
       <PsButton text="Opción 4" type="default" on:click-evt={goPage} page="op4">
         <span slot="info-text" class="btn-special" />
       </PsButton>
     </li>
     <li>
       <PsButton text="Opción 5" type="default" on:click-evt={goPage} page="op5">
         <span slot="info-text" class="btn-special" />
       </PsButton>
     </li>
     </ul>
  </div>
</div>

Para terminar, si necesitas enviar parámetros entre las páginas, deberemos definir dentro del fichero de rutas (routes.js) los parámetros en cada ruta.

A continuación la sintaxis básica para definir las rutas con sus parámetros:

  • /path coincide con la ruta (/path) exactamente.
  • /path/:id coincide con la ruta (/path) y a continuación cualquier cadena.
  • /path/:id/:other? coincide con la ruta (/path) y a continuación cualquier cadena (:id) siendo opcional el segundo parámetro (:other?).
  • /path/* coincide con la ruta (/path) y a continuación cualquier cosa.

routes.js

import op1 from './pages/opcion1.svelte';
import op2 from './pages/opcion2.svelte';
import op3 from './pages/opcion3.svelte';
import op4 from './pages/opcion4.svelte';
import op5 from './pages/opcion5.svelte';
import error from './pages/error.svelte';

const routes = {
  '/op1/:data1?/:data2?': op1,
  '/op2': op2,
  '/op3': op3,
  '/op4': op4,
  '/op5': op5,
  '*': error
};

export default routes;

opcion1.svelte

<script>
  export let params = {};
</script>
<hr>
<h1>OPCION 1</h1>
<div>
  <p>Parámetros en la URL</p>
  <ul>
    <li>Primer parámetro: { params.data1 }</li>
    <li>Segundo parámetro: { params.data2 }</li>
  </ul>
</div>
<hr>

Con esto damos por terminado el sistema de rutas en Svelte, no obstante si queremos aprovechar las posibilidades que ofrece recomiendo revisar la documentación básica y avanzada que tiene esta gran librería.