Para el UI del Portal de Servicios unificado, cada servicio definirá sus rutas en un archivo module.routes.js, que se situará en el directorio raíz del servicio, y tendrá esta estructura:

Rutas de un servicio

import { defineAsyncComponent } from 'vue';

const ExpedientesView = defineAsyncComponent(() => import(/* webpackChunkName: "CEXP_ExpedientesView" */'./views/ExpedientesView.vue'));

const rutaProyecto = '/consulta/expedienteacademico';

export default [
  {
    path: `${rutaProyecto}/`,
    name: 'CEXP Expedientes',
    component: ExpedientesView,
    meta: {
      requiresAuth: true,
    },
  },
  { ... },
  { ... },
];

Todos las rutas serán lazy, se cargarán los componentes cuando se navegue a ellos, para evitar que se tenga que cargar todo al inicio de la aplicación. Para eso, como vemos, utilizamos defineAsyncComponent y en el import especificamos webpackChunkName, especificando un nombre distintivo (no poner "home", por ejemplo, mejor poner como en el ejemplo, algo distintivo de tu servicio):

import { defineAsyncComponent } from 'vue';
 
const nombreInterno1 = defineAsyncComponent(() => import(/* webpackChunkName: "nombreFragmentoEnDist1" */'./views/Componente1.vue'));
const nombreInterno2 = defineAsyncComponent(() => import(/* webpackChunkName: "nombreFragmentoEnDist2" */'./views/Componente2.vue'));

Después, como vemos, definimos la ruta base del proyecto, que utilizaremos en cada una de las rutas. Por último, para las rutas que requieran estar autenticado, especificamos incluimos esto:

meta: {
    requiresAuth: true,
},

También es importante remarcar que el name debe de ser único, pondremos nombres específicos de nuestro proyecto. Si hay rutas repetidas en el proyecto, no funcionará.

Añadir rutas al portal

Para añadir las rutas al router global de POSE, tendremos que modificar el archivo app.routes.js, situado en src/. Hay que importar el archivo previo e incluirlo al final del objeto que devuelve el router, de esta forma.

Import:

import nombreRutasComponente from './nombreGrupo/nombreProyecto/nombreComponente';

Declaración:

export default [
  ...PoseRoutes,
  ...MNCSRoutes,
  ...ultimoficheroDeRutas,  <--------
  {
    path: '/:catchAll(.*)',
    ...
  }
];

En la siguiente imagen se puede ver cómo ha quedado el fichero tras añadir el módulo de Mis Certificados:

Definir sub-rutas

Podemos definir rutas hijas de una ruta ya existente, añadiéndolas al parámetro children de la ruta padre:

  {
    path: "/about",
    name: "about",
    component: About,
	children: [{path: "detalle", name: "Detalle", component: Detalle }]
  },

En este ejemplo la ruta padre sería /about, y la ruta hija /about/detalle. A la hora de definir rutas hijas, es importante tener en cuenta que el path no debe incluir la barra ("/"), pues si lo hace lo toma como lo que hay inmediatamente después de la url de nuestro sitio.

Vista del router

El router habrá que incluirlo como un componente más (en POSE ya está incluido), así:

<router-view></router-view>

Así, esta parte de la página se sustituirá por el componente correspondiente, cambiando sólo la parte necesaria de la página sin tener que volver a cargarlo todo.

Navegar

Para realizar la navegación, podríamos hacerlo con href, pero es mejor utilizar router-link:

<router-link :to="{ name: 'nuevaComunicacion', params: { idReenviar: fila.data.id }}">

Como vemos, se le indica a dónde navegar con el nombre que hemos definido previamente para la ruta. Además podemos pasar datos como parámetro, con params (también vale para pasar props al componente al que se navega). Después, en el componente al que se navega (utilizando Options API), podemos coger dichos datos referenciando a this.$route.params. En este ejemplo, el objeto que se ha pasado se cogería con this.$route.params.idReenviar.

Si queremos hacerlo de forma programática, en la parte de JavaScript con this.$router.push():

// path
this.$router.push('home')
 
// path
this.$router.push({ path: 'home' })
 
// nombre + parámetros path (....um.es/loquesea?userId=123)
this.$router.push({ name: 'user', params: { userId: '123' } }) 

// nombre + parámetros query (....um.es/loquesea?userId=123)
this.$router.push({ name: 'user', params: { userId: '123' } })

Aquí vemos las opciones de path params y query params. Para utilizar los path params, es necesario navegar por nombre, no utilizando el path. Para obtener sus valores en el componente al que se navega, lo podemos hacer con:

// path params
this.$route.params.nombreparametro

// query params
this.$route.query.nombreparametro

Es importante saber que estos valores se reciben como un string.

En Composition API, la sintaxis cambia, en vez de acceder a this.$router y this.$route, disponemos de useRouter() y useRoute():

<script setup>
import { userRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
</script>

Y ya las se accede como visto anteriormente, pero usando router o route:

// path
router.push('home')
 
// path
router.push({ path: 'home' })
 
// nombre + parámetros path (....um.es/loquesea?userId=123)
router.push({ name: 'user', params: { userId: '123' } }) 

// nombre + parámetros query (....um.es/loquesea?userId=123)
router.push({ name: 'user', params: { userId: '123' } })


// path params
route.params.nombreparametro

// query params
route.query.nombreparametro

Interceptores de navegación

Vue router ofrece la posibilidad de añadir código para ejecutarlo cuando se produzca la navegación, con los navigation guards. Son una serie de métodos que podemos definir. El proceso de navegación, y el momento en el que se ejecuta cada método es el siguiente:

1. La navegación es activada.

2. Se llama a todos los beforeRouterLeave que se hayan registrado y que no van a ser reutilizados en la siguiente ruta a la que voy.

3. Se llama a todos los interceptores globales beforeEach.

4. Se llama a todos los beforeRouteUpdate de los componentes que van a ser reutilizados en la siguiente ruta a la que voy.

5. Se llama a beforeEnter que hemos configurado en la ruta a la que voy.

6. Se resuelven toda la asincronía de componentes de esa ruta.

7. Se llama a beforeRouteEnter de los componentes que van a estar activos.

8. Se llama a los interceptores globales beforeResolve.

9. Se da la navegación como confirmada.

10. Se llama al interceptor afterEach.

11. Se llama a los callbacks pasados a next in beforeRouteEnter.

12. Y vuelta a empezar cuando se lanza una nueva navegación.

Estos métodos pueden ser globales (no los utilizaremos) o locales a cada ruta.

Interceptores por ruta

Se pueden definir interceptores beforeEnter directamente en el objeto que define las rutas, con la misma notación que los interceptores globales before:

{
    path: '/foo',
    component: Foo,
    beforeEnter: (to, from, next) => {
    // ...
}

Interceptores por componente

Se pueden definir interceptores de navegación dentro de los componentes que se pasan a las rutas, con las siguientes opciones:

• beforeRouteEnter: se llama antes de que la ruta que navega a este componente se confirme. No tiene acceso al this del componente, pues todavía no se ha creado.

• beforeRouteUpdate: se llama antes de que la ruta que lleva a este componente haya cambiado. Por ejemplo, para una ruta con parámetros dinámicos /foo/:id, cuando navegamos entre /foo/1 y /foo/2, se reutiliza el mismo componente, y este interceptor se ejecuta cuando eso ocurre. Éste sí tiene acceso a this.

• beforeRouteLeave: se ejecuta cuando la ruta que renderiza este componente va a navegar a otra ruta. También tiene acceso a this.

beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
},
beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed.
    // This component being reused (by using an explicit `key`) in the new route or not doesn't change anything.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused (unless you provided a `key` to `<router-view>`), and this hook will be called when that happens.
    // has access to `this` component instance.
},
beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
}