router-link VueJS can't link to an element in the same page

Question

I'm trying to developp a sidebar of a documentation who it links to elements on th same page

      <div class="mt-6">
            <li class="relative">
              <router-link class="menuItem-active-link"  to="#users">
                 {{$t('navigation.users')}}
              </router-link>

            </li>
             <li class="relative">
              <a href="#advanced" class="menuItem-active-link" >
                {{$t('navigation.advanced')}}
              </a>
            </li>
          </div>

when I use the a tag I can navigate between each elements but I didn't know how styling the active link
And when I use router-link the URL change but the page stay on the current element, it does'nt go to the specified element on to attribute. And with router-link I can styling the active link easly:

.router-link-exact-active.menuItem-active-link{
    background-color: cyan;
 }

Have you any idea to solve this problem ?

Answer 1

This should work

<router-link :to="{ hash: '#users' }">{{ $t('navigation.users') }}</router-link>

Similar to this answer.