[{"data":1,"prerenderedAt":1025},["ShallowReactive",2],{"\u002Fblog\u002Fgestionar-rutas-dinamicas-nuxt":3},{"id":4,"title":5,"body":6,"date":1005,"description":1006,"extension":1007,"headerImage":1008,"isActive":179,"keywords":1009,"meta":1014,"navigation":179,"path":1016,"seo":1017,"stem":1018,"subject":1019,"summary":1021,"tags":1022,"__hash__":1024},"blog\u002Fblog\u002Fgestionar-rutas-dinamicas-nuxt.md","Gestionar rutas dinámicas Nuxt",{"type":7,"value":8,"toc":999},"minimark",[9,14,18,48,51,69,92,96,109,125,266,269,273,286,312,320,553,564,567,604,621,711,718,722,725,728,743,874,885,892,995],[10,11,13],"h2",{"id":12},"entendiendo-las-rutas-dinámicas","Entendiendo las rutas dinámicas",[15,16,17],"p",{},"Antes de meterse de lleno en la cuestión principal es importante que tengamos claro qué son y cómo funcionan las rutas dinámicas en Nuxt.",[15,19,20,21,27,28,33,34,38,39,42,43,47],{},"Por defecto Nuxt utiliza ",[22,23,26],"span",{"className":24},[25],"inline-coding","vue-router"," para crear su sistema de rutas de forma que el nombre de cada fichero que incluyamos en el directorio ",[22,29,32],{"className":30},[31],"inline-file","\u002Fpages"," tenga una ruta asociada, es decir, si creamos un fichero con el nombre ",[22,35,37],{"className":36},[31],"test.vue"," en el directorio ",[22,40,32],{"className":41},[31]," tendremos la url ",[22,44,46],{"className":45},[25],"https:\u002F\u002FTU_DOMINIO\u002Ftest"," disponible.",[15,49,50],{},"Cuando queremos crear rutas dinámicas el proceso es parecido pero debemos indicar cual es el directorio raíz del que van a partir las rutas dinámicas, de manera que si tenemos una sección de nuestra web que cataloga especies de animales y queremos que para cada especie exista una página diferente, añadir cada una de ellas a mano puede no ser la mejor opción y querremos tener un sistema automatizado ya sea por un gestor de contenidos o una base de datos que se encargue de ello.",[15,52,53,54,58,59,63,64,68],{},"Para este caso, podríamos tener un directorio ",[22,55,57],{"className":56},[31],"\u002Fanimals"," en el que podemos definir un fichero ",[22,60,62],{"className":61},[31],"index.vue"," que será la página principal de ese directorio, y otro fichero ",[22,65,67],{"className":66},[31],"_slug.vue"," que se encargará de gestionar las páginas dinámicas para cada animal. Esto generaría las siguientes rutas:",[70,71,72,80],"ul",{},[73,74,75,76],"li",{},"Ruta principal de animales: ",[22,77,79],{"className":78},[25],"https:\u002F\u002FTU_DOMINIO\u002Fanimals",[73,81,82,83,87,88],{},"Rutas dinámicas: ",[22,84,86],{"className":85},[25],"https:\u002F\u002FTU_DOMINIO\u002Fanimals\u002Flion"," ó ",[22,89,91],{"className":90},[25],"https:\u002F\u002FTU_DOMINIO\u002Fanimals\u002Fdog",[10,93,95],{"id":94},"nomenclatura-de-ficheros","Nomenclatura de ficheros",[15,97,98,99,103,104,108],{},"Al nombrar un fichero empezando con una barra baja (",[22,100,102],{"className":101},[25],"_",") le decimos a Nuxt que esa página va a ser dinámica y el nombre que le damos después de la barra baja indica la variable que recibirá el nombre de la ruta (En el ejemplo anterior ",[22,105,107],{"className":106},[25],"slug",").",[15,110,111,112,116,117,120,121,124],{},"Esto es útil de cara a validar si esa ruta existe o no a la hora de acceder a una de estas páginas dinámicas y poder gestionar redirecciones a páginas de error. Por ejemplo podríamos usar el método ",[22,113,115],{"className":114},[25],"validate"," para asegurarnos que el ",[22,118,107],{"className":119},[25]," es válido o tiene un formato que deseamos, por lo que si el parámetro de ruta ",[22,122,107],{"className":123},[25]," no cumple las validaciones que queramos el método validate ejecutará la redirección automática a la página de error.",[126,127,133],"pre",{"className":128,"code":129,"filename":130,"language":131,"meta":132,"style":132},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default {\n  name: 'AnimalPage',\n\n  validate({ params }) {\n    const { slug } = params\n\n    return slug && typeof slug === 'string'\n  }\n}\n",".pages\u002Fanimals\u002F_slug.vue","js","",[134,135,136,151,174,181,199,222,227,254,260],"code",{"__ignoreMap":132},[22,137,140,144,147],{"class":138,"line":139},"line",1,[22,141,143],{"class":142},"s7zQu","export",[22,145,146],{"class":142}," default",[22,148,150],{"class":149},"sMK4o"," {\n",[22,152,154,158,161,164,168,171],{"class":138,"line":153},2,[22,155,157],{"class":156},"swJcz","  name",[22,159,160],{"class":149},":",[22,162,163],{"class":149}," '",[22,165,167],{"class":166},"sfazB","AnimalPage",[22,169,170],{"class":149},"'",[22,172,173],{"class":149},",\n",[22,175,177],{"class":138,"line":176},3,[22,178,180],{"emptyLinePlaceholder":179},true,"\n",[22,182,184,187,190,194,197],{"class":138,"line":183},4,[22,185,186],{"class":156},"  validate",[22,188,189],{"class":149},"({",[22,191,193],{"class":192},"sHdIc"," params",[22,195,196],{"class":149}," })",[22,198,150],{"class":149},[22,200,202,206,209,213,216,219],{"class":138,"line":201},5,[22,203,205],{"class":204},"spNyl","    const",[22,207,208],{"class":149}," {",[22,210,212],{"class":211},"sTEyZ"," slug",[22,214,215],{"class":149}," }",[22,217,218],{"class":149}," =",[22,220,221],{"class":211}," params\n",[22,223,225],{"class":138,"line":224},6,[22,226,180],{"emptyLinePlaceholder":179},[22,228,230,233,235,238,241,243,246,248,251],{"class":138,"line":229},7,[22,231,232],{"class":142},"    return",[22,234,212],{"class":211},[22,236,237],{"class":149}," &&",[22,239,240],{"class":149}," typeof",[22,242,212],{"class":211},[22,244,245],{"class":149}," ===",[22,247,163],{"class":149},[22,249,250],{"class":166},"string",[22,252,253],{"class":149},"'\n",[22,255,257],{"class":138,"line":256},8,[22,258,259],{"class":149},"  }\n",[22,261,263],{"class":138,"line":262},9,[22,264,265],{"class":149},"}\n",[15,267,268],{},"Esta validación inicial puede ser muy útil para evitar llamadas innecesarias a nuestro backend para validar una ruta que ya podemos identificar como no válida.",[10,270,272],{"id":271},"generando-las-rutas-dinámicas","Generando las rutas dinámicas",[15,274,275,276,280,281,285],{},"Es posible que ya tengamos montado nuestro sistema con una gran cantidad de páginas de animales pero si ahora tratamos de desplegar nuestro sitio web en nuestro hosting vamos a observar que todas las rutas dinámicas dan error y nos redirigen a la página de\n",[22,277,279],{"className":278},[25],"404",". Esto ocurre porque si bien hemos construido y definido nuestro sistema de rutas en tiempo de ejecución, no hemos definido cómo van a generarse estas páginas y por lo tanto no se han creado al ejecutar nuestro proceso de ",[22,282,284],{"className":283},[25],"build",".",[15,287,288,289,293,294,298,299,303,304,308,309,285],{},"Si tenemos un sitio web estático podemos ver que al ejecutar el comando ",[22,290,292],{"className":291},[25],"nuxt generate"," se crea la página ",[22,295,297],{"className":296},[31],"animals"," pero no las páginas dinámicas y como cada página debe tener su ",[22,300,302],{"className":301},[25],"bundle"," generado en el directorio (por defecto) ",[22,305,307],{"className":306},[31],"\u002Fdist",", todo lo que no esté aquí dará como resultado una redirección a la página ",[22,310,279],{"className":311},[25],[15,313,314,315,319],{},"Para solucionar este problema vamos a indicar que en el proceso de generación de nuestro sitio se incluyan todas estas rutas, cosa que debemos indicar porque Nuxt no puede saber cuántos animales tenemos en nuestra base de datos o gestor de contenidos, de modo que vamos a editar el fichero ",[22,316,318],{"className":317},[31],"nuxt.config.js"," y a definir nuestras rutas. Lo primero es crear una función que se va a encargar de consultar las rutas disponibles en nuestra base de datos o gestor de contenido, la cual podemos ubicar en el mismo fichero o extraerla a un fichero de utilidades e importarla:",[126,321,324],{"className":128,"code":322,"filename":323,"language":131,"meta":132,"style":132},"async function _getRoutes() {\n  const response = await fetch('https:\u002F\u002Fwww.fakeapi.com\u002Fanimals', {\n    method: 'GET'\n  })\n  \u002F\u002F ['lion', 'dog']\n  const animalsList = await response.json()\n  const animalsPaths = []\n\n  if (Array.isArray(animalsList)) {\n    animalsList.forEach((animalPath) => {\n      animalsPaths.push(`\u002Fanimals\u002F${animalPath}`)\n    })\n  }\n\n  return animalsPaths\n}\n","JS",[134,325,326,343,374,388,396,402,423,435,439,466,492,521,529,534,539,548],{"__ignoreMap":132},[22,327,328,331,334,338,341],{"class":138,"line":139},[22,329,330],{"class":204},"async",[22,332,333],{"class":204}," function",[22,335,337],{"class":336},"s2Zo4"," _getRoutes",[22,339,340],{"class":149},"()",[22,342,150],{"class":149},[22,344,345,348,351,353,356,359,362,364,367,369,372],{"class":138,"line":153},[22,346,347],{"class":204},"  const",[22,349,350],{"class":211}," response",[22,352,218],{"class":149},[22,354,355],{"class":142}," await",[22,357,358],{"class":336}," fetch",[22,360,361],{"class":156},"(",[22,363,170],{"class":149},[22,365,366],{"class":166},"https:\u002F\u002Fwww.fakeapi.com\u002Fanimals",[22,368,170],{"class":149},[22,370,371],{"class":149},",",[22,373,150],{"class":149},[22,375,376,379,381,383,386],{"class":138,"line":176},[22,377,378],{"class":156},"    method",[22,380,160],{"class":149},[22,382,163],{"class":149},[22,384,385],{"class":166},"GET",[22,387,253],{"class":149},[22,389,390,393],{"class":138,"line":183},[22,391,392],{"class":149},"  }",[22,394,395],{"class":156},")\n",[22,397,398],{"class":138,"line":201},[22,399,401],{"class":400},"sHwdD","  \u002F\u002F ['lion', 'dog']\n",[22,403,404,406,409,411,413,415,417,420],{"class":138,"line":224},[22,405,347],{"class":204},[22,407,408],{"class":211}," animalsList",[22,410,218],{"class":149},[22,412,355],{"class":142},[22,414,350],{"class":211},[22,416,285],{"class":149},[22,418,419],{"class":336},"json",[22,421,422],{"class":156},"()\n",[22,424,425,427,430,432],{"class":138,"line":229},[22,426,347],{"class":204},[22,428,429],{"class":211}," animalsPaths",[22,431,218],{"class":149},[22,433,434],{"class":156}," []\n",[22,436,437],{"class":138,"line":256},[22,438,180],{"emptyLinePlaceholder":179},[22,440,441,444,447,450,452,455,457,460,463],{"class":138,"line":262},[22,442,443],{"class":142},"  if",[22,445,446],{"class":156}," (",[22,448,449],{"class":211},"Array",[22,451,285],{"class":149},[22,453,454],{"class":336},"isArray",[22,456,361],{"class":156},[22,458,459],{"class":211},"animalsList",[22,461,462],{"class":156},")) ",[22,464,465],{"class":149},"{\n",[22,467,469,472,474,477,479,481,484,487,490],{"class":138,"line":468},10,[22,470,471],{"class":211},"    animalsList",[22,473,285],{"class":149},[22,475,476],{"class":336},"forEach",[22,478,361],{"class":156},[22,480,361],{"class":149},[22,482,483],{"class":192},"animalPath",[22,485,486],{"class":149},")",[22,488,489],{"class":204}," =>",[22,491,150],{"class":149},[22,493,495,498,500,503,505,508,511,514,516,519],{"class":138,"line":494},11,[22,496,497],{"class":211},"      animalsPaths",[22,499,285],{"class":149},[22,501,502],{"class":336},"push",[22,504,361],{"class":156},[22,506,507],{"class":149},"`",[22,509,510],{"class":166},"\u002Fanimals\u002F",[22,512,513],{"class":149},"${",[22,515,483],{"class":211},[22,517,518],{"class":149},"}`",[22,520,395],{"class":156},[22,522,524,527],{"class":138,"line":523},12,[22,525,526],{"class":149},"    }",[22,528,395],{"class":156},[22,530,532],{"class":138,"line":531},13,[22,533,259],{"class":149},[22,535,537],{"class":138,"line":536},14,[22,538,180],{"emptyLinePlaceholder":179},[22,540,542,545],{"class":138,"line":541},15,[22,543,544],{"class":142},"  return",[22,546,547],{"class":211}," animalsPaths\n",[22,549,551],{"class":138,"line":550},16,[22,552,265],{"class":149},[70,554,555,558],{},[73,556,557],{},"Asumimos que existe una API llamada \"FakeAPI\" que nos va a devolver un listado de rutas de animales. Seguramente nuestro sistema nos devuelva otra estructura pero creo que este ejemplo es sencillo para entender lo que debemos hacer",[73,559,560,561,285],{},"Construimos la estructura de rutas relativas y la devolvemos en un ",[22,562,449],{"className":563},[25],[15,565,566],{},"Lo que nos dará un resultado como este:",[126,568,571],{"className":128,"code":569,"filename":570,"language":131,"meta":132,"style":132},"[\n  '\u002Fanimals\u002Flion',\n  '\u002Fanimals\u002Fdog'\n]\n","JS Array",[134,572,573,578,590,599],{"__ignoreMap":132},[22,574,575],{"class":138,"line":139},[22,576,577],{"class":211},"[\n",[22,579,580,583,586,588],{"class":138,"line":153},[22,581,582],{"class":149},"  '",[22,584,585],{"class":166},"\u002Fanimals\u002Flion",[22,587,170],{"class":149},[22,589,173],{"class":149},[22,591,592,594,597],{"class":138,"line":176},[22,593,582],{"class":149},[22,595,596],{"class":166},"\u002Fanimals\u002Fdog",[22,598,253],{"class":149},[22,600,601],{"class":138,"line":183},[22,602,603],{"class":211},"]\n",[15,605,606,607,611,612,616,617,160],{},"Ahora que tenemos los ",[22,608,610],{"className":609},[25],"paths"," de nuestras rutas dinámicas podemos editar el parámetro ",[22,613,615],{"className":614},[25],"generate"," invocando a la función ",[22,618,620],{"className":619},[25],"_getRoutes()",[126,622,624],{"className":128,"code":623,"filename":318,"language":131,"meta":132,"style":132},"{\n  generate: {\n    fallback: true,\n    async routes() {\n      const routes = await _getRoutes($content)\n\n      return routes\n    }\n  }\n}\n",[134,625,626,630,640,653,666,686,690,698,703,707],{"__ignoreMap":132},[22,627,628],{"class":138,"line":139},[22,629,465],{"class":149},[22,631,632,636,638],{"class":138,"line":153},[22,633,635],{"class":634},"sBMFI","  generate",[22,637,160],{"class":149},[22,639,150],{"class":149},[22,641,642,645,647,651],{"class":138,"line":176},[22,643,644],{"class":634},"    fallback",[22,646,160],{"class":149},[22,648,650],{"class":649},"sfNiH"," true",[22,652,173],{"class":149},[22,654,655,658,661,664],{"class":138,"line":183},[22,656,657],{"class":211},"    async",[22,659,660],{"class":336}," routes",[22,662,663],{"class":156},"() ",[22,665,465],{"class":149},[22,667,668,671,673,675,677,679,681,684],{"class":138,"line":201},[22,669,670],{"class":204},"      const",[22,672,660],{"class":211},[22,674,218],{"class":149},[22,676,355],{"class":142},[22,678,337],{"class":336},[22,680,361],{"class":156},[22,682,683],{"class":211},"$content",[22,685,395],{"class":156},[22,687,688],{"class":138,"line":224},[22,689,180],{"emptyLinePlaceholder":179},[22,691,692,695],{"class":138,"line":229},[22,693,694],{"class":142},"      return",[22,696,697],{"class":211}," routes\n",[22,699,700],{"class":138,"line":256},[22,701,702],{"class":149},"    }\n",[22,704,705],{"class":138,"line":262},[22,706,259],{"class":149},[22,708,709],{"class":138,"line":468},[22,710,265],{"class":149},[15,712,713,714,717],{},"De esta forma cuando ejecutemos de nuevo el comando ",[22,715,292],{"className":716},[25]," se van a generar todas las rutas dinámicas que hemos obtenido de nuestra base de datos o gestor de contenidos.",[10,719,721],{"id":720},"consideraciones","Consideraciones",[15,723,724],{},"Aunque he tratado de poner un ejemplo muy simple, es importante tener en cuenta que este sistema de generación nos puede ayudar a realizar muchos tipos de validaciones. Por ejemplo nuestro sistema de backend podría indicarnos que una ruta está temporalmente inactiva mediante un atributo de cada ruta de animales y podríamos excluirla de la generación.",[15,726,727],{},"Hay muchos casos de uso a los que nos enfrentaremos a la hora de construir el routing de nuestra aplicación pero con estos casos básicos seguro que podrás entender el cómo abordarlos.",[15,729,730,731,735,736,739,740,160],{},"Si estás utilizando el módulo ",[22,732,734],{"className":733},[25],"@nuxt-content"," para crear tus páginas de contenido puedes utilizar su API para configurar la generación de rutas. Sólo tienes que editar la función ",[22,737,620],{"className":738},[25]," para que reciba la referencia al módulo ",[22,741,683],{"className":742},[25],[126,744,746],{"className":128,"code":745,"filename":323,"language":131,"meta":132,"style":132},"async function _getRoutes($content) {\n  const animalsList = await $content('animals')\n    .fetch()\n    .catch(() => {\n      return []\n    })\n  const animalsPaths = animalsList.map((item) => item.path)\n\n  return animalsPaths\n}\n",[134,747,748,764,787,797,812,818,824,860,864,870],{"__ignoreMap":132},[22,749,750,752,754,756,758,760,762],{"class":138,"line":139},[22,751,330],{"class":204},[22,753,333],{"class":204},[22,755,337],{"class":336},[22,757,361],{"class":149},[22,759,683],{"class":192},[22,761,486],{"class":149},[22,763,150],{"class":149},[22,765,766,768,770,772,774,777,779,781,783,785],{"class":138,"line":153},[22,767,347],{"class":204},[22,769,408],{"class":211},[22,771,218],{"class":149},[22,773,355],{"class":142},[22,775,776],{"class":336}," $content",[22,778,361],{"class":156},[22,780,170],{"class":149},[22,782,297],{"class":166},[22,784,170],{"class":149},[22,786,395],{"class":156},[22,788,789,792,795],{"class":138,"line":176},[22,790,791],{"class":149},"    .",[22,793,794],{"class":336},"fetch",[22,796,422],{"class":156},[22,798,799,801,804,806,808,810],{"class":138,"line":183},[22,800,791],{"class":149},[22,802,803],{"class":336},"catch",[22,805,361],{"class":156},[22,807,340],{"class":149},[22,809,489],{"class":204},[22,811,150],{"class":149},[22,813,814,816],{"class":138,"line":201},[22,815,694],{"class":142},[22,817,434],{"class":156},[22,819,820,822],{"class":138,"line":224},[22,821,526],{"class":149},[22,823,395],{"class":156},[22,825,826,828,830,832,834,836,839,841,843,846,848,850,853,855,858],{"class":138,"line":229},[22,827,347],{"class":204},[22,829,429],{"class":211},[22,831,218],{"class":149},[22,833,408],{"class":211},[22,835,285],{"class":149},[22,837,838],{"class":336},"map",[22,840,361],{"class":156},[22,842,361],{"class":149},[22,844,845],{"class":192},"item",[22,847,486],{"class":149},[22,849,489],{"class":204},[22,851,852],{"class":211}," item",[22,854,285],{"class":149},[22,856,857],{"class":211},"path",[22,859,395],{"class":156},[22,861,862],{"class":138,"line":256},[22,863,180],{"emptyLinePlaceholder":179},[22,865,866,868],{"class":138,"line":262},[22,867,544],{"class":142},[22,869,547],{"class":211},[22,871,872],{"class":138,"line":468},[22,873,265],{"class":149},[15,875,876,880,881,285],{},[877,878,879],"strong",{},"NOTA",": Suponiendo que los ficheros están en el directorio ",[22,882,884],{"className":883},[31],".\u002Fcontent\u002Fanimals",[15,886,887,888,891],{},"Y para terminar modificaríamos el fichero ",[22,889,318],{"className":890},[31]," de la siguiente forma:",[126,893,895],{"className":128,"code":894,"filename":318,"language":131,"meta":132,"style":132},"{\n  generate: {\n    fallback: true,\n    async routes() {\n      const { $content } = require('@nuxt\u002Fcontent')\n      const routes = await _getRoutes($content)\n\n      return routes\n    }\n  }\n}\n",[134,896,897,901,909,919,929,955,973,977,983,987,991],{"__ignoreMap":132},[22,898,899],{"class":138,"line":139},[22,900,465],{"class":149},[22,902,903,905,907],{"class":138,"line":153},[22,904,635],{"class":634},[22,906,160],{"class":149},[22,908,150],{"class":149},[22,910,911,913,915,917],{"class":138,"line":176},[22,912,644],{"class":634},[22,914,160],{"class":149},[22,916,650],{"class":649},[22,918,173],{"class":149},[22,920,921,923,925,927],{"class":138,"line":183},[22,922,657],{"class":211},[22,924,660],{"class":336},[22,926,663],{"class":156},[22,928,465],{"class":149},[22,930,931,933,935,937,939,941,944,946,948,951,953],{"class":138,"line":201},[22,932,670],{"class":204},[22,934,208],{"class":149},[22,936,776],{"class":211},[22,938,215],{"class":149},[22,940,218],{"class":149},[22,942,943],{"class":336}," require",[22,945,361],{"class":156},[22,947,170],{"class":149},[22,949,950],{"class":166},"@nuxt\u002Fcontent",[22,952,170],{"class":149},[22,954,395],{"class":156},[22,956,957,959,961,963,965,967,969,971],{"class":138,"line":224},[22,958,670],{"class":204},[22,960,660],{"class":211},[22,962,218],{"class":149},[22,964,355],{"class":142},[22,966,337],{"class":336},[22,968,361],{"class":156},[22,970,683],{"class":211},[22,972,395],{"class":156},[22,974,975],{"class":138,"line":229},[22,976,180],{"emptyLinePlaceholder":179},[22,978,979,981],{"class":138,"line":256},[22,980,694],{"class":142},[22,982,697],{"class":211},[22,984,985],{"class":138,"line":262},[22,986,702],{"class":149},[22,988,989],{"class":138,"line":468},[22,990,259],{"class":149},[22,992,993],{"class":138,"line":494},[22,994,265],{"class":149},[996,997,998],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":132,"searchDepth":153,"depth":176,"links":1000},[1001,1002,1003,1004],{"id":12,"depth":153,"text":13},{"id":94,"depth":153,"text":95},{"id":271,"depth":153,"text":272},{"id":720,"depth":153,"text":721},"2022-08-22","Aprende a gestionar y generar tus rutas dinámicas con Nuxt mediante una simple configuración.","md","blog\u002Fcoding-ndr",[1010,1011,1012,1013],"nuxt rutas dinamicas","rutas dinamicas","thebyteland rutas dinamicas","byteland rutas dinamicas",{"postTitle":1015},"Gestiona tus rutas dinámicas con Nuxt","\u002Fblog\u002Fgestionar-rutas-dinamicas-nuxt",{"title":5,"description":1006},"blog\u002Fgestionar-rutas-dinamicas-nuxt",[1020],"Nuxt","Si tienes o quieres montar un sitio web con Nuxt y parte de tus páginas tienen rutas dinámicas puede que hayas encontrado alguna dificultad a la hora de gestionarlas. Te cuento cómo hacerlo de forma sencilla.",[1023],"Programación","L1tDsHGP0bqy_TEqF483ga-sXQKBSJqZHosI3k3PRGw",1784660333356]