Quiero navegar a una sección específica de una página desde otra página. Así que agregué la función scrollBehavior en el objeto del enrutador en el archivo nuxt.config.js como este:
router: { scrollBehavior(to) { if (to.hash) { return { selector: to.hash, behavior: "smooth" }; } } }Mi árbol de directorios de 'páginas' es así:
pages/ index.vue parent.vue random.vueEn default.vue del directorio 'layouts' escribí la barra de navegación:
<button @click="$router.push({ name: 'parent' })">Parent One</button> <button @click="$router.push({ name: 'parent', hash: '#sec2' })">Parent Two</button>Dentro de parent.vue tengo dos secciones:
<div class="sec-1" id="sec1"> <h1>Parent One</h1> <p>... </p> </div> <div class="sec-2" id="sec2"> <h1>Parent Two</h1> <p>... </p> </div>Ahora, el problema es que cuando hago clic en el botón 'principal dos' del archivo random.vue no funciona. pero cuando estoy en el archivo parent.vue y hago clic en el botón, se desplaza a la segunda sección. Pero quiero navegar a la segunda sección desde la página random.vue. Si escribo el código exacto en un proyecto vue, funciona bien pero no funciona en el proyecto nuxt. Pero necesito hacerlo en mi proyecto Nuxt.
Mirando mi respuesta aquí , puede configurar lo siguiente en un archivo ~/app/router.scrollBehavior.js
export default function(to, from, savedPosition) { console.log("this is the hash", to.hash) return new Promise((resolve, reject) => { if (to.hash) { setTimeout(() => { resolve({ selector: to.hash, behavior: "smooth" }) }, 10) } }) }Y debería funcionar bien. Tal vez simplemente falle silenciosamente cuando no encuentre el selector o lo aplique solo en rutas específicas.