...

Después, como vemos, definimos la ruta base del proyecto, que utilizaremos en cada una de las rutas.

Añadir variables del proyecto (meta) para nuestras rutas. Funcionalidades extra

Por último, para las rutas que requieran estar autenticado, especificamos incluimos esto:

meta: {
    requiresAuth: true,
},

Además, existen (edición 21/02/2023) dos nuevas variables meta que se pueden añadir a cada una de nuestras rutas, :

• needs2FA: Se añadirá a aquellas rutas que necesiten un factor doble de autenticación por parte del usuario, aunque todo este factor de autenticación deberá comprobarse en cada llamada al backend. Es para darle una mejor experiencia al usuario cuando navegue entre pantallas.
  
• hiddenFeature: Se utilizará cuando queramos mostrar algo a algún usuario y que llegue hasta producción pero no esté preparado para funcionar al 100% (bien porque no se tengan datos definitivos, bien porque no haya ni backend) y se podrá activar para navegar visitando /feature-flag/nuestra/ruta Si no la activamos,

...

• enviará al usuario a un error 404.
  

Como con requiresAuth, no es necesario añadirlas si su valor va a ser false.

Al final, una ruta completa quedaría de este estilo:

meta: {
  requiresAuth: true,
  needs2FA: true,
  hiddenFeature: true,
  group: 'user',
  application: 'profile-data',
},

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.

...

<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: 'userHome', 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

...

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


// path params
route.params.nombreparametro

// query params
route.query.nombreparametro

Interceptores de navegación

...