Vue.js scroll to top of page for same route

Question

I can set scrolling behaviour to Vue.js Router like this:

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Main
        },
        {
            path: '/some-path',
            name: 'some-path',
            component: SomePath
        }
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
})

This works perfectly when you click on the link with some page which is not current. When I click on the link which is already rendered, i.e. in the footer, nothing happens. Vue Router assumes there is no state transition. What is the preferred way to scroll up in this case?

Answer 1

You can't do this trough vue-router. But you can add scroll to top method to every router-link.

Just create a method

 methods: { 
           scrollToTop() {
                window.scrollTo(0,0);
           }
        }

And add it to the link

<router-link @click.native="$scrollToTop">

if you wanna use it outside of your footer too it's better to add it to the Vue prototype

Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)

It's not a 100% solution but it's the simplest one