Introducción
Vue, como muchos otros frameworks para el desarrollo web (Angular, React) también tiene un sistema para crear rutas. Como hemos explicado en capítulos anteriores, Vue permite crear páginas web SPA, es decir, el usuario tiene la sensación de que está navegando entre las páginas pero lo que de verdad ocurre es que Vue por debajo está cambiando el HTML al vuelo sin tener que recargar la página.
Es decir, por ejemplo, si estás en la página principal de una aplicación SPA y navegas a la URL /users, Vue lo que hace es renderizar el componente asociado a esa ruta en la página web. Como ese componente ya lo tiene cargado el cambio entre páginas es inmediato.
Para conseguir esto, el creador del Vue router (que es español por cierto) ha desarrollado un conjunto de utilidades para crear rutas en Vue. Es decir, en un fichero configuras las rutas que quieres crear y las asocias a componentes que se cargarán cuando el usuario navegue a la ruta.
Cómo funciona el vue-router
Si has instalado Vue con el Vue CLI y has seleccionado el método manual, te habrá salido la opción de instalar el vue router. Si no lo tienes instalado no te preocupes porque vamos a ver cómo se instala.
Antes de nada, para saber si lo tienes instalado mira en el archivo package.json si tienes dentro de la sección dependencias un paquete llamado:
En mi caso tengo la versión 3.0.3 pero tú puedes tener otra versión, no pasa nada.
Si no tienes instalado vue-router lo que tienes que hacer es instalarlo dentro del proyecto, para ello, mediante línea de comandos ejecuta:
npm install vue-router --save
A continuación, lo que tienes que hacer es crear un archivo llamado router.js dentro de la carpeta src, al mismo nivel que el main.js.
Dentro del archivo lo primero que tienes que hacer es importar Vue y vue-router y hacer que vue use el router, así:
importVuefrom"vue";importVueRouterfrom'vue-router'Vue.use(VueRouter)
Si el vue-router lo instalaste con vue-cli al crear el proyecto este archivo ya lo tendrás.
Las rutas se crean en un array con esta sintaxis:
constroutes=[{path:"/",name:"home",component:Home}];
En este caso hay una sola ruta, la ruta raíz, es decir, la que se abre al abrir la página.
Como ves cada ruta se crea en forma de objeto con propiedades. En el path indicas la ruta que quieres que se use (por ejemplo “/users”), en el name puedes darle un nombre a la ruta para identificarla posteriormente, y en el component pones el componente que quieres que se use en esa ruta, así que tendrás que importarlo de esta forma:
importHomefrom"./views/Home.vue";
Si te fijas las rutas las importo desde una carpeta llamada views dentro del src. Esto se hace para poder identificar bien qué componentes se encargan de cada una de las vistas. Es decir si quieres localizar el componente que se encarga de renderizar la ruta /users lo único que tienes que hacer es ir a carpeta views para buscar un componente llamado Users o parecido.
Debajo de las rutas, en el mismo fichero, tienes que meter esto para que Vue pueda usar las rutas que acabas de crear:
constrouter=newRouter({mode:"history",routes});exportdefaultrouter;
Se hace el export para que en el main.js podamos pasar las rutas a Vue, es decir, dentro del archivo main.js del src tienes que meter esto para que funcione:
importVuefrom"vue";importAppfrom"./App.vue";importrouterfrom"./router";newVue({router,render:h=>h(App)}).$mount("#app");
Y listo, con esto ya tendríamos una ruta funcionando en Vue. Si quieres añadir más rutas lo que tienes que hacer simplemente es añadir más objetos al array de rutas del archivo router.js que acabas de crear, así:
importVuefrom"vue";importVueRouterfrom'vue-router'importHomefrom"./views/Home.vue";importUsersfrom"./views/Users.vue";Vue.use(VueRouter)constroutes=[{path:"/",name:"home",component:Home},{path:"/users",name:"users",component:Users}];constrouter=newRouter({mode:"history",routes});exportdefaultrouter;
Cuando navegues a la ruta [http://localhost:8080/users](http://localhost:8080/users) se cargará el componente Users de la carpeta views y por tanto se verá lo que haya en ese componente. Al navegar a la ruta principal, es decir, a [http://localhost:8080/](http://localhost:8080/users) se cargará el componente Home.
Ciclo de vida de un componente en Vue
Visto cómo crear rutas en Vue, el siguiente paso en tu aprendizaje es comprender lo que ocurre cuando entras en la ruta, es decir, el controlar el ciclo de vida de los componentes.
Los componentes, en todos los frameworks, tienen ciclo de vida, en otras palabras, los componentes, se crean, se cargan, se insertan en ls vista y se destruyen, y lo bueno de esto es que puedes ejecutar código en cada uno de estos estados.
Aunque Vue tiene muchos métodos para distintos estados, voy a explicar los mas habituales, los que acabarás usando siempre, ya que el resto se usan mucho menos. En este gráfico puedes ver el ciclo que sigue Vue para los componentes.
![Ciclo de vida de los componentes de Vue: Created, mounted, destroyed]()
Por cierto, una limitación que tienen estos estados es que no puedes usar dentro arrow functions, no puedes hacer esto porque se pierde el contexto del this y ya no puedes acceder al data y a los métodos.
Si quieres hacer algo de este estilo tienes que guardarte el valor del this o hacer un bindeo del mismo.
Created
Uno de los que más se usan. Se ejecuta después de beforeCreated. En ese punto Vue ya ha cargado todas las opciones del componente y por tanto ya existe la sección data y los métodos. Aquí puedes hacer llamadas a variables y puedes ejecutar métodos.
La única pega es que en este punto Vue todavía no ha cargado la vista, no la ha renderizado y no puedes leer o modificar nada que afecte a ls vista porque todavía no existe. No puedes acceder al DOM de ese componente.
Este método se suele usar para realizar las llamadas API REST, por ejemplo si queremos pintar un array con información que provenga del backend lo que se suele hacer es dentro del created hacer la llamada y almacenar el valor de retorno de una de las variables del data. Como Vue es reactivo, cuando la vista esté cargada se pintará el array.
Veamos un ejemplo:
<script>exportdefault{data:()=>({info:null,}),created(){this.info="Componente cargado";}};</script>
Si te fijas lo que se hace es declarar un método created, usualmente debajo de los métodos al final del componente.
Como vimos en los métodos, para acceder a las variables se utiliza el this, en este caso para poner un valor a una variable.
También podemos llamar a métodos de la sección methods con el this e incluso podemos hacer uso de las propiedades *computadas.*
Mounted
A diferencia del created, en el mounted si que tenemos acceso al DOM, es decir, el computed se ejecuta exactamente cuando se termina de pintar la vista en la página web y por tanto desde aquí podemos hacer cambios en la vista.
<template><ahref="/link">link</a></template><script>exportdefault{data:()=>({info:null,}),mounted(){console.log(this.$el.querySelectorAll('a'));}};</script>
Si te fijas, para acceder a un elemento del DOM se puede hacer mediante la variable que crea Vue al renderizar el componente this.$el.
Si te salta un error porque no existe el elemento, una forma de asegurarse de que Vue ya ha renderizado todos los elementos del DOM es usar la función nextTick de Vue.
<template><ahref="/link">link</a></template><script>exportdefault{data:()=>({info:null,}),mounted(){this.$nextTick(()=>{console.log(this.$el.querySelectorAll('a'));});}};</script>
La función nextTick lo que hace es dejar pasar un pequeño intervalo de tiempo, el correspondiente a un tick.
Updated
Con este método hay que tener mucho cuidado. Se ejecuta cada vez que se produce un cambio en el componente y cambia algo de la vista. Se recomienda aquí no hacer muchos cambios en el data o en la vista y utilizar propiedades computadas o watchers que veremos más adelante.
<script>exportdefault{data:()=>({info:null,}),updated(){console.log("Componente actualizado");}};</script>
Hay que tener cuidado porque puede que se ejecute más veces de las que en realidad queremos.
Destroyed
Como puedes suponer, el destroyed se ejecuta cuando eliminamos un componente, cuando ya no esta cargado. Esto puede pasar cuando cambias de vista o cuando o cuando se borra un componente del DOM porque ha sido ocultado con v-if.
<script>exportdefault{data:()=>({info:null,}),destroyed(){console.log("Componente eliminado");}};</script>
Conclusiones
Existen muchos más métodos en el ciclo de un componente de Vue como el beforeCreated o el beforeMounted, pero no he querido explicar más porque no quiero alargar demasiado el artículo. Además los que te he enseñado aquí son los que más va a usar y los otros en raras ocasiones te harán falta.
Hasta ahora ya hemos visto cómo se crean componentes, cómo crear rutas de la web y cómo controlar el ciclo de vida de los componentes, falta ver otra de las partes más importantes del desarrollo de aplicaciones wen con componentes y es la comunicación entre ellos, el paso de información. En posteriores capítulos abordaremos esta cuestión, no te lo pierdas.
Historial de páginas en Firefox
Barra de búsqueda inteligente de Firefox
En primer lugar, quería desearos a todos unas felices fiestas; como debe ser, espero que descanséis y aprovechéis para pasar estos días disfrutando de la familia y amigos. Y ya puestos, espero también que el 2020 sea un gran año para todos.
Si, como el que os habla, sois unos seguidores incondicionales del 
Los equipos ágiles no quieren saber cuánto trabajo llevan invertido en una tarea, sino cuánto falta para terminarla, porque no que les interesa contabilizar horas, sino mantener un ritmo de avance hacia la meta.
El segundo puesto lo ocupa un artículo sobre una de las novedades más espectaculares que acompañaron a ASP.NET Core 2.2, a primeros del año pasado: 
El primer libro que terminé de leer en 2020 fue Radicalized por uno de mis autores preferidos: 
