Historial de página

...

Para definir las rutas, tendremos un directoriodirectorio router/dentro dede src/, que contendráindex.js. En él podemos definir una lista con un objeto por cada ruta, de la siguiente forma:

...

Aquí nos definimos la ruta que tendremos en la url, un nombre que incluiremos opcionalmentoopcionalmente, para referenciarlo desde otras partes del código en lugar de escribir la ruta, y por último el componente que se mostrará cuando naveguemos a la ruta.

...

import Vue from 'vue'
import VueRouter from  'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'
 
Vue.use(VueRouter);
 
const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    props: true
  }
]
 
const router = new VueRouter({
  mode: 'history',
  routes
})
 
export default router

A los componentes a los que pueden acceder las rutas también se les pueden pasar propiedades, añadiendo un objeto props: {} a la rutaSi nos fijamos, podemos poner en cada ruta un campo props a true. Con esto, cuando naveguemos a esa ruta, los parámetros que se le pasen cuyo nombre coincida con un prop definido en el componente se asignará a este directamente. Es importante tener en cuenta que para hacer esto, tendremos que hacer la navegación utilizando el name, y no el path, pues si no no funciona.

Vista del router

El router habrá que incluirlo como un componente más. Así, podemos definir la parte de la pantalla que cambiará cuando se cambie de ruta, pudiendo dejar fijo, por ejemplo, un menú lateral, y que sólo se tenga que cargar el contenido de la página.

...

Para relizar la navegación, podríamos hacerlo conhref, pero es mejor utilizarutilizar router-link:

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

...