I have a small Vue.js SPA with the following router configuration, taken from the docs:
export default new VueRouter({
routes, // defined above...
mode: 'history',
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return { selector: to.hash }
} else if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 }
}
}
})
Consider a link on the homepage:
<router-link to="#services">Services</router-link>
It jumps to the anchor element <div id="services">...</div>
as expected. However, when you activate the link, then scroll away from #services
, and refresh the page, you will not be brought back to #services
. You will stay in the same position where you left off, even though the URL would still have the hash in it (e.g. in the form of app.dev/#services
).
How can I configure the router so that on page load, it bring the user to the anchor element, given that the URL contains its hash (and, well, that hash corresponds to a valid existing element)?