Quiero usar un button envuelto en router-link para desplazar la ventana gráfica horizontalmente ( 100% to the right de un vue component . Esto funciona bien con las anchor tags :

 <a href="#about"> <button class="btn">About</button> </a>

pero tan pronto como trato de reemplazarlos con router-link el desplazamiento horizontal deja de funcionar (el desplazamiento vertical aún funciona):

 <router-link :to="{ hash: 'about' }"> <button class="btn">About</button> </router-link>

Esta función dentro router.js es responsable del desplazamiento:

 import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); export default new VueRouter({ mode: "history", routes: [...], scrollBehavior(to, from, savedPosition) { if (to.hash) { return window.scrollTo({top: document.querySelector(to.hash).offsetTop, behavior: 'smooth'}); } return window.scrollTo({top: 0, behavior: 'smooth'}); } });

El componente al que se va a desplazar la ventana gráfica se ha colocado en el lado derecho fuera de la ventana gráfica de la siguiente manera:

 .about { position: absolute; transform: translateX(100%); height: 100vh; width: 100%; }

Editar:

Cambiar el botón a:

 <button @click="$router.push({ hash: 'about' })">About</button>

hace que la ventana gráfica se desplace hacia abajo aproximadamente un 20% y solo en vertical, no en horizontal. No sé por qué se produce este comportamiento. scrollBehavior(to, from, savedPosition) {console.log(to)} muestra esto:

 {name: 'home', meta: {…}, path: '/', hash: '#about', query: {…}, …} fullPath: "/#about" hash: "#about" matched: [{…}] meta: {} name: "home" params: {} path: "/" query: {} [[Prototype]]: Object