[Vuejs]-Vue router – path #ID scrollBehavior

by

0👍

With a few research, I found two things that could help you.

First, this error is known and discussed on github vue-router issues page.

Second, I found that Workaround on npmjs.com, and you could probably give it a try.

EDIT

I found another solution to a similar problem here.

And from that page, I found a scrollBehavior example like this:

scrollBehavior: function (to) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

And if it still doesn’t work, you could try to use
:to="{ name: 'Home', hash: 'fifthPage'}".

0👍

You must switch your VueRouter from hash mode to history mode of routing – then hashtags will work but in a different way.
Your routes should not have a hash symbol # inside their path – instead, you should provide it under the hash attribute of the route link:

<router-link :to="{ name: pathName, hash: '#text' }">
    Jump to content
</router-link>

But this alone is not enough. You also need to alter the scrollBehavior of the VueRouter:

import { routes } from './routes.js';

const router = new VueRouter({
    routes,
    scrollBehavior(to, from, savedPosition) 
    {
        if (savedPosition) 
        {
            return savedPosition;
        }
        if (to.hash) 
        {
            return { selector: to.hash }; // <==== the important part
        }
        return { x: 0, y: 0 };
    }
});

Leave a comment