scroll between Nav and components Vue - vue.js

Question

I have created a vue single page this way:
My app.vue
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<Navegacion/>
<Cabecera/>
<Contenido/>
<Aside/>
<Footer/>
</div>
</template>
My navigation.vue
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="flex flex-row blanco">
<div class="item-uno">
<nav class="flex flex-row items-center">
<a #click="desplazar" href="#">Quienes somos</a>
<a #click="desplazar" href="#">Cómo funciona</a>
<a #click="desplazar" href="#">Servicios a empresas</a>
<a #click="desplazar" href="#">Compromiso</a>
</nav>
</div>
<div class="item-dos flex justify-center">
<img id="logo" src="../assets/logo.svg" alt="logo apeteat">
</div>
<div class="item-uno flex justify-center items-center">
<a class="btn blue">Nuevo pedido</a>
<div class="flex flex-row items-center">
<i class="fas fa-shopping-bag"></i>
<p>0,00 €</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Navegacion',
props: {
},
methods: {
desplazar: function() {
window.scrollTo(0,200);
}
}
}
</script>
I want to make scroll to the correspondent component when clicking on a navigation link.
I have installed npm scroll-to, and I have tried to add a function methd desplazar but it's not working.
Thanks in advance for your help.

Answer 1

window.scrollTo() is javascript window method, you don't need to install anything to use it.
It works in your code but href="#" always throw you at the top of the page so it's cancelling window.scrollTo().
You need to remove href="#" from your links.
To scroll to component first you need to add ref to it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<Navegacion ref="Navegacion" />
<Cabecera ref="Cabecera" />
<Contenido ref="Contenido" />
<Aside ref="Aside" />
<Footer ref="Footer" />
</div>
</template>
and your function should looks like this
scrollToNavegacion() {
window.scrollTo(0, this.$refs.Navegacion.$el.offsetTop);
}