How to scroll to a specific anchor using a router-link?

Question

I'm trying to develop a simple website using vue js and so far it goes well but I'm facing the following Issue:

I'm using a router to change pages, it works, but what I need to do is: Change Page & scroll to a specific anchor.

What I tried already:

Works well: Route to contact page or home

<router-link to="/contact">Contact</router-link>
<router-link to="/">Home</router-link>

Doesn't work:

<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>

The last one works only if I'm on the home page, but whenever I change to Contact Page and try to route to "/#technology" it won't work. It does try routing to "http://example.com/contact/#technology" instead of "http://example.com/#technology".

If I do it like that, it will just scroll to top, but not to the anchor:

<router-link to="/#technology" Technology</router-link>

My Router Code:

const routes = [
    { path: '/', component: Home },
{ path: '/contact', component: Contact }
]

const router = new VueRouter({
     mode: 'history',

     routes,
       scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;

        }

         if (to.hash) {
            return { selector: to.hash };
        }
    return { x: 0, y: 0 }
  },


});

new Vue({
    router,
}).$mount('#app');

And the templates look like this ( I did remove the unnecessary code):

<template id="home">
<div>
Home
<div id="technology"> <!-- IT SHOULD SCROLL TO HERE -->
</div>
</template>

<template id="contact">
<div>
Contact Page
</div>
</template>

Answer 1

i think you are on the right path.

but maybe you have mistaken the usage of Route name and path.

instead of

<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>

try using path instead of name

<router-link :to="{ path: '/', hash: '#technology' }" >Technology</router-link>