Vue-router redirect to hash with timeout

Question

I have route like this:

{
    path: '/kontakt',
    redirect: '#contact',
    component: index
},

and scrollBehavior:

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
        return savedPosition
    }
    if(!to.hash) {
        return {
            x: 0, y: 0
        }
    }
    if(to.hash) {
        return {
            selector: to.hash
        }
    }
}

and IMO because I display my page 1 second after user actually enter it (I show logo for 1sec) above code doesn't scroll page to #contact div when I enter /kontakt route.

app.vue

<div v-show="timeGap">
    <router-view />
</div>

here timeGap is changed to true after 1sec in setTimeout method. How to fix so it scroll to #contact div after this timeout?

Can you provide a complete example somewhere on codepen or like that? — AndrewShmig, Jan 17 '19 at 14:42
Can't really reproduce entire SPA with routing within code playground. — BT101, Jan 17 '19 at 14:57
You can create `Vue.js` + `vue-router` example on codepen + `setTimeout` or what you are using and it will be much better to find what's wrong. — AndrewShmig, Jan 17 '19 at 14:59

score 0 · Answer 1 · edited Jul 16 '22 at 05:34

You have to move the control of your scrolling behaviour from your router scrollBehavior handler to your component index and there into the place that knows the logo show state is off.

This might be:

a Vue lifecycle hook (either mounted or updated);
or other point in this component that knows the logo state (watch after computed ?);

As soon as you find that place (watch) in your component you have to check if the logo state is off and do your scroll using this approach.

Vue-router redirect to hash with timeout

1 Answers1