Router is a step behind current page

[ndarilek]

Thanks for this package. As a screen reader user myself, I appreciate that you've created an easy-to-integrate solution to one of the bigger accessibility pain points of single-page apps.

When attempting to use this in my current app, I've noticed that route transition announcements are always a page behind the current route. For instance, say I start on Home. I then click About. The message I receive is "Home has loaded." Likewise, navigating from About to Home speaks "About has loaded."

I did some experimentation of my own, and it seems like document.title isn't updated by the time afterEach is called. I've also confirmed that the demo works as expected, so the difference must be in my setup.

I've created this sample app that demonstrates the problem I'm having. I'm using autorouting and vue-meta plugins, and am wondering if these plugins add a bit of transition time to routes such that the document isn't quite rerendered when afterEach triggers? I've tried Vue.nextTick but that doesn't seem sufficient either. Maybe I'll try Vue.nextTick(() => Vue.nextTick(() => ...)) next, kicking the update down the road a couple ticks to see if that makes a difference. :)Any help with this would be greatly appreciated, and I'll keep this issue updated if I discover anything new. I'm not familiar with creating Vue plugins or working heavily with its internals, so don't immediately know how to debug this further.

Thanks again.

[ndarilek]

Update:

If I add something like setTimeout(() => console.log(document.title), 5), things seem to work. Nested nextTick calls didn't.

Seems like a bit of a hack, but then again, so is half of web development these days it seems. :P Not sure if that's the solution or if there is a better way.

[ktquez]

Have you tried using the meta parameter?
https://github.com/vue-a11y/vue-announcer#custom-message-to-each-page-optional

@ndarilek Thanks for using and contribute