{"id":7569,"date":"2018-06-25T13:32:54","date_gmt":"2018-06-25T11:32:54","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=7569"},"modified":"2021-09-14T17:57:10","modified_gmt":"2021-09-14T15:57:10","slug":"routing-vue-js","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/","title":{"rendered":"Routing en Vue.js. Creando urls din\u00e1micas"},"content":{"rendered":"

Hola a todos! En esta ocasi\u00f3n vamos a adentrarnos en el mundo de Vue.js. En este post hablaremos de c\u00f3mo preparar el routing en nuestra aplicaci\u00f3n de Vue.js.<\/p>\n

Como ya sabr\u00e9is Vue.js es un framework de javascript que est\u00e1 pensado (de manera similar a Angular) para crear SPA -es decir-\u00a0Single page applications<\/em><\/strong> o aplicaciones de una s\u00f3la p\u00e1gina.<\/p>\n

Por ello, para crear nuestras urls internas tendremos que decirle a nuestra aplicaci\u00f3n qu\u00e9 componente corresponde a cada url. Para ello utilizaremos routing, mediante un plugin de Vue.js, llamado Vue-Router<\/a>.<\/p>\n

A parte, veremos c\u00f3mo podemos pasarle alguna variable a este url, para crear diferentes urls din\u00e1micas sin necesidad de crearlas manualmente.<\/p>\n

Instalaci\u00f3n del routing<\/h2>\n

Primero, veremos c\u00f3mo se instala este plugin y c\u00f3mo se utiliza de una manera sencilla. Tan s\u00f3lo tenemos que abrir la consola de comandos, colocarnos en la carpeta de nuestro proyecto y all\u00ed escribir \u00abnpm install vue-router –save\u00bb. Con esto ya tendremos el routing listo para usar.<\/p>\n

Para empezar, tendremos que crear las routes en nuestro proyecto de Vue.<\/p>\n

El primer paso es registrar el nuevo plugin dentro de nuestro proyecto. Tenemos que abrir el archivo ‘main.js’, que es el que controla toda nuestra aplicaci\u00f3n (en este archivo podremos registrar plugins y componentes de forma global), e importar el plugin mediante:<\/p>\n

import vueRouter from 'vue-router'<\/pre>\n
Vue.use(vueRouter);<\/pre>\n
La variable \u00abvueRouter\u00bb puede ser la que quer\u00e1is, pero acordaos de utilizar la misma cuando utiliz\u00e9is Vue.use.<\/p>\n
Creando nuestras Routes<\/h2>\n
El siguiente paso es crear el path con nuestras urls, o lo que es lo mismo: crear las routes. Podemos hacerlos directamente en el archivo ‘main.js’, pero para mantener cierto orden es preferible crear un archivo js que contenga todas nuestras routes y llamarlo luego en el archivo principal.<\/p>\n
Ejemplo:<\/p>\n
import routes from '.\/nombre-del-archivo-js'<\/pre>\n
En nuestro archivo routes.js, importamos todos los componentes que vayamos a utilizar como p\u00e1ginas. Simplemente volvemos a utilizar import from… y la ruta donde se hallen nuestros components (en mi caso siempre creo una carpeta llamada ‘components’).<\/p>\n
El archivo tendr\u00e1 un aspecto similar a este:<\/p>\n
\r\nimport blog from '.\/components\/blog.vue'\r\nimport about from '.\/components\/about.vue'\r\n\r\nexport default [\r\n\r\n\t{path: '\/', component: blog},\r\n\t{path: '\/about', component: about}\r\n]\r\n<\/pre>\n
Como veis, primeros importamos los componentes que vayamos a usar y luego construimos un objeto que lleva dos propiedades: path y component.<\/p>\n
En path, a\u00f1adiremos ‘\/nombre-de-la-ruta’ para decirle a nuestra app en qu\u00e9 ruta estar\u00e1 el componente. (La dejaremos vac\u00eda para la home).<\/p>\n
En component, escogeremos el componente que queramos enlazar a dicha ruta.<\/p>\n
As\u00ed de f\u00e1cil vamos creando las diferentes p\u00e1ginas de nuestra web.<\/p>\n
Por \u00faltimo, volvemos al archivo ‘main.js’. Aqu\u00ed tendremos que crear una nueva instancia del objeto ‘vueRouter’ y decirle d\u00f3nde se encuentras los paths que hemos creado.<\/p>\n
Por \u00faltimo, llamamos a esta instancia en nuestro objeto vue. El c\u00f3digo ser\u00eda similar a este:<\/p>\n
\r\nimport Vue from 'vue'\r\nimport App from '.\/App.vue'\r\nimport vueRouter from 'vue-router'\r\nimport Routes from '.\/routes' \r\n\r\nVue.use(vueRouter);\r\n\r\nconst rutas = new vueRouter({\r\n\troutes: Routes\r\n})\r\n\r\nnew Vue({\r\n  el: '#app',\r\n  render: h => h(App),\r\n  router: rutas\r\n})\r\n<\/pre>\n
Mostrando el routing en nuestra app<\/h2>\n
Ya est\u00e1 todo listo! Pero a\u00fan no le hemos dicho a nuestra app d\u00f3nde queremos que nos muestre las rutas que hemos creado.\u00a0 Lo \u00fanico que hay que hacer es llamar al router como si fuese un componente: <router-view><\/router-view>.<\/p>\n
Con esto le estaremos diciendo a vue que nos muestre el componente que tengamos en la ruta actual. Lo que har\u00e1 la aplicaci\u00f3n es cargar el componente s\u00f3lo en la etiqueta <router-view> sin recargar el resto de la p\u00e1gina. \u00bfNo es genial? As\u00ed nuestra p\u00e1gina cargar\u00e1 mucho m\u00e1s r\u00e1pido.<\/p>\n
Creando nuestro men\u00fa<\/h3>\n
Hacer el men\u00fa con Vue Router es lo m\u00e1s sencillo del mundo. Vamos a nuestro nav y, en vez de crear las diferentes <a>, creamos etiquetas <router-link>. Estas etiquetas llevaran un atributo \u00abto\u00bb en el que escogemos a donde nos llevar\u00e1 el link.<\/p>\n
\r\n<li><router-link to="\/">Home<\/router-link><\/li>\r\n<li><router-link to="\/about">About us<\/router-link><\/li>\r\n<\/pre>\n
Con esto crearemos links que se ocupar\u00e1n de cambiar el contenido de la etiqueta <router-view>, sin recargar el resto de la p\u00e1gina.<\/p>\n
Adem\u00e1s, la aplicaci\u00f3n vue-router detecta en que url estamos y si un link lleva a esa url le a\u00f1ade la class active. As\u00ed podremos destacar con css ese bot\u00f3n, \u00a1de una forma casi autom\u00e1tica y muy f\u00e1cil!<\/p>\n
Crear urls din\u00e1micas con Routing parameters<\/h2>\n
Despu\u00e9s de haber visto c\u00f3mo crear nuestras rutas en una app hecha en vue, vamos a estudiar c\u00f3mo crear diferentes links sin la necesidad de crear uno por uno.<\/p>\n
Imaginemos que tenemos un blog, y que cada entrada de nuestro blog tiene un enlace que nos lleva a la noticia completa. \u00bfTendr\u00edamos que crear un path para cada noticia y un componente por cada una de ellas?<\/p>\n
\u00a1Por supuesto que no! Los crearemos de forma din\u00e1mica.<\/p>\n
Lo que vamos a hacer es una variable que recogeremos de alg\u00fan sitio y la a\u00f1adiremos a la url. As\u00ed cada noticia tendr\u00e1 su propia url.<\/p>\n
Aqu\u00ed traigo un ejemplo ultra sencillo. He hecho un array de objetos que contiene cada una de mis noticias:<\/p>\n
data () {\r\n  \treturn {\r\n\t  \tposts: [\r\n\r\n\t  \t\t{id:'noticia-1', title: 'Noticia 1', content: 'Lorem ipsum dolor sit amet 1'},\r\n\t  \t\t{id:'noticia-2', title: 'Noticia 2', content: 'Lorem ipsum dolor sit amet 2'},\r\n\t  \t\t{id:'noticia-3', title: 'Noticia 3', content: 'Lorem ipsum dolor sit amet 3'},\r\n\t  \t\t{id:'noticia-4', title: 'Noticia 4', content: 'Lorem ipsum dolor sit amet 4'}\r\n\r\n\t  \t]\r\n  \t}\r\n  }<\/pre>\n
Como veis, cada noticia contiene una propiedad \u00abid\u00bb que utilizar\u00e9 a modo de slug. Esa id ser\u00e1 la url de mi noticia. Para pasar esta variable a la url crear\u00e9 el siguiente c\u00f3digo:<\/p>\n
\r\n<li v-for="post in posts">\r\n\t<h2><router-link v-bind:to="'\/blog\/'+post.id">{{post.title}}<\/router-link><\/h2>\r\n<\/li>\r\n<\/pre>\n
Con la directiva v-for creo un bucle que recorre mi array. Por lo tanto, el t\u00edtulo de cada noticia tendr\u00e1 un <router-link> que me llevar\u00e1 a la url: \u00abblog\/+id de la noticia\u00bb. Por ejemplo, la noticia 1 llevar\u00eda a: \u00abblog\/noticia-1\u00bb. As\u00ed cada una de ellas.<\/p>\n
(Fijaos que para poder utilizar una variable como valor de un atributo, he de utilizar la directiva v-bind en la etiqueta <router-link>).<\/p>\n
Con esto ya tenemos nuestra url din\u00e1mica.<\/p>\n
Pero a\u00fan no hemos creado el path correspondiente, por lo que la url no nos llevar\u00e1 a ning\u00fan sitio.<\/p>\n
Para crear un route con un par\u00e1metro utilizamos \u00ab\/:nombre-del-par\u00e1metro. En nuestro caso: \u00ab{path: ‘\/blog\/:id’, component: singleBlog}\u00bb. Con esto estoy dici\u00e9ndole a la app que lo que encuentre tras la segunda barra sea tratado como un par\u00e1metro llamado \u00abid\u00bb.<\/p>\n
En nuestro ejemplo, la url \u00abblog\/lo-que-sea\u00bb siempre nos llevar\u00e1 al componente \u00absingleBlog\u00bb. Con la diferencia que dentro de ese componente podremos recoger el par\u00e1metro que estamos pasando via url.<\/p>\n
Si escribimos:\u00a0this.$route.params.id, en el componente, obtendremos \u00ablo-que-sea\u00bb, puesto que corresponde al par\u00e1metro \u00abid\u00bb.<\/p>\n
Gracias a eso, ya podremos diferenciar nuestra noticia de las otras. Recordad que en mi ejemplo ten\u00eda un array. Yo podr\u00eda recorrer ese array y decirle que cuando la id de un objeto me coincida a la que paso por par\u00e1metro me imprima la noticia que corresponda. Algo as\u00ed:<\/p>\n
\r\n  \tfor(var x=0; x<this.posts.length; x++){\r\n\r\n  \t\tif(this.id == this.posts[x].id){\r\n  \t\t\tthis.index = x;\r\n  \t\t}\r\n  \t}\r\n<\/pre>\n
\u00a1Magia! Ahora cuando hago click en el listado de noticias, me llevar\u00e1 a una p\u00e1gina: \u00abblog\/id-de-la-noticia\u00bb. Dentro de esa p\u00e1gina (que ser\u00e1 nuestro componente singleBlog, ya que as\u00ed lo hemos espec\u00edficado en nuestro archivo \u00abroutes.js\u00bb), podremos recoger \u00abid-de-la-noticia\u00bb, gracias a los par\u00e1metros de vue-router: \u00abthis.$route.params.id\u00bb. (Recordad que la palabra clave id la hab\u00edamos especificado en el path como \u00ab\/blog\/:id\u00bb, aunque el par\u00e1metro podr\u00eda tener un nombre a nuestra elecci\u00f3n, s\u00f3lo debemos tener en cuenta que lo que haya tras los dos puntos ser\u00e1 el nombre del par\u00e1metro).<\/p>\n
Con este par\u00e1metro que recogemos ya tendremos algo que podremos usar para decirle al programa qu\u00e9 noticia o qu\u00e9 cosa debe buscar y mostrar.<\/p>\n
Para esto ya hay mil formas de hacerlo, el ejemplo que os traigo es una de ellas. Depender\u00e1 de donde est\u00e9is recogiendo la informaci\u00f3n que quer\u00e9is mostrar en vuestra p\u00e1gina, pero eso lo dejaremos para otro art\u00edculo.<\/p>\n
Hasta la pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hola a todos! En esta ocasi\u00f3n vamos a adentrarnos en el mundo de Vue.js. En este post hablaremos de c\u00f3mo preparar el routing en nuestra aplicaci\u00f3n de Vue.js. Como ya sabr\u00e9is Vue.js es un framework de javascript que est\u00e1 pensado (de manera similar a Angular)…<\/p>\n","protected":false},"author":26,"featured_media":7616,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,4,5],"tags":[633,632],"class_list":["post-7569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-internet","category-programacion","tag-routing","tag-vue-js"],"yoast_head":"\nRouting en Vue.js. Creando urls din\u00e1micas - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En esta ocasi\u00f3n vamos a adentrarnos en el mundo de Vue.js, en este post hablaremos de c\u00f3mo preparar el routing en nuestra aplicaci\u00f3n de Vue.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Routing en Vue.js. Creando urls din\u00e1micas - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En esta ocasi\u00f3n vamos a adentrarnos en el mundo de Vue.js, en este post hablaremos de c\u00f3mo preparar el routing en nuestra aplicaci\u00f3n de Vue.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-25T11:32:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-14T15:57:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paco Luque\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paco Luque\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/\"},\"author\":{\"name\":\"Paco Luque\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"headline\":\"Routing en Vue.js. Creando urls din\u00e1micas\",\"datePublished\":\"2018-06-25T11:32:54+00:00\",\"dateModified\":\"2021-09-14T15:57:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/\"},\"wordCount\":1296,\"commentCount\":3,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg\",\"keywords\":[\"routing\",\"vue.js\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Internet\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/\",\"name\":\"Routing en Vue.js. Creando urls din\u00e1micas - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg\",\"datePublished\":\"2018-06-25T11:32:54+00:00\",\"dateModified\":\"2021-09-14T15:57:10+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"description\":\"En esta ocasi\u00f3n vamos a adentrarnos en el mundo de Vue.js, en este post hablaremos de c\u00f3mo preparar el routing en nuestra aplicaci\u00f3n de Vue.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg\",\"width\":800,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Routing en Vue.js. Creando urls din\u00e1micas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\",\"name\":\"Paco Luque\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g\",\"caption\":\"Paco Luque\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/paco\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Routing en Vue.js. Creando urls din\u00e1micas - Blog Escola Espai","description":"En esta ocasi\u00f3n vamos a adentrarnos en el mundo de Vue.js, en este post hablaremos de c\u00f3mo preparar el routing en nuestra aplicaci\u00f3n de Vue.js.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/","og_locale":"es_ES","og_type":"article","og_title":"Routing en Vue.js. Creando urls din\u00e1micas - Blog Escola Espai","og_description":"En esta ocasi\u00f3n vamos a adentrarnos en el mundo de Vue.js, en este post hablaremos de c\u00f3mo preparar el routing en nuestra aplicaci\u00f3n de Vue.js.","og_url":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/","og_site_name":"Blog Escola Espai","article_published_time":"2018-06-25T11:32:54+00:00","article_modified_time":"2021-09-14T15:57:10+00:00","og_image":[{"width":800,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg","type":"image\/jpeg"}],"author":"Paco Luque","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Paco Luque","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/"},"author":{"name":"Paco Luque","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"headline":"Routing en Vue.js. Creando urls din\u00e1micas","datePublished":"2018-06-25T11:32:54+00:00","dateModified":"2021-09-14T15:57:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/"},"wordCount":1296,"commentCount":3,"image":{"@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg","keywords":["routing","vue.js"],"articleSection":["Dise\u00f1o Web","Internet","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/","url":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/","name":"Routing en Vue.js. Creando urls din\u00e1micas - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg","datePublished":"2018-06-25T11:32:54+00:00","dateModified":"2021-09-14T15:57:10+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"description":"En esta ocasi\u00f3n vamos a adentrarnos en el mundo de Vue.js, en este post hablaremos de c\u00f3mo preparar el routing en nuestra aplicaci\u00f3n de Vue.js.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg","width":800,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2018\/06\/routing-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Routing en Vue.js. Creando urls din\u00e1micas"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725","name":"Paco Luque","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g","caption":"Paco Luque"},"url":"https:\/\/www.espai.es\/blog\/author\/paco\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/06\/vue.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=7569"}],"version-history":[{"count":30,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7569\/revisions"}],"predecessor-version":[{"id":12310,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7569\/revisions\/12310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/7616"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=7569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=7569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=7569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}