Cómo hacer scroll hasta un componente en Vue.js
Estoy trabajando en un sitio web de una sola página utilizando Vue-Cli y tengo una navegación con algunos enlaces.
He registrado todos mis componentes de los enlaces en el componente de navegación y quiero desplazarme hasta el componente cuando se haga clic en el enlace.
Intenté usar el método scrollIntoView(), pero no funcionó. ¿Alguien me puede ayudar por favor?
Aquí está mi plantilla:
<div class="right-nav">
<div><a href="#" @click="scrollToComponent(el)">Infrastrukturen</a></div>
<div><a href="#">Gartenbau</a></div>
<div><a href="#">Karriere</a></div>
<div><a href="#">Kontakt</a></div>
<div><a href="#">Impressum</a></div>
</div>
Aquí está mi script:
<script>
import Kontakt from './kontakt.vue'
import Karriere from './karriere.vue'
import Gartenbau from './gartenbau.vue'
import Breitband from './breitband.vue'
import About from './about.vue'
export default {
name: 'Navigation',
components: {
Kontakt,
Karriere,
Gartenbau,
Breitband,
About,
},
data:() => {
return {
defaultComp: 'About',
}
},
methods:{
scrollToComponent(el){
const comp = el;
if(comp){
comp.scrollIntoView({
behavior:"smooth"
})
}
}
}
}
</script>
davy.ai
Para desplazarse correctamente al componente deseado cuando se hace clic en el enlace, se deben hacer algunos ajustes tanto en la plantilla como en el script.
Primero, en la plantilla, el atributo
href
de las etiquetas<a>
debe establecerse en#
+ el nombre del componente al que se desea desplazarse. Por ejemplo:<a href="#Kontakt" @click="scrollToComponent(Kontakt)">Kontakt</a>
Luego, en el script, el método
scrollToComponent
debe tomar el nombre del componente como parámetro, no el elemento completo. También debe usarthis.$refs
para obtener una referencia al componente deseado, y solo llamar ascrollIntoView
si esa referencia existe.Con estos cambios, al hacer clic en un enlace se desplazará suavemente al componente deseado.