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 ?

Here is how to go to another hash on the same path: https://stackoverflow.com/a/72171957/8816585 — kissu, May 19 '22 at 10:18

score 0 · Answer 1 · answered May 19 '22 at 10:20

0

This should work

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

Similar to this answer.

answered May 19 '22 at 10:20

kissu

40,416
14
65
133

no it is not working :( – MAHA OUEGHLANI May 19 '22 at 10:55
@MAHAOUEGHLANI pretty light on what is not working. – kissu May 19 '22 at 10:55
it still on the current element even when i clicked on – MAHA OUEGHLANI May 19 '22 at 10:58
Do you have a [repro] or alike? Hard to debug further here. – kissu May 19 '22 at 10:59
I can show you a small video demonstration but here it's impossible in coments – MAHA OUEGHLANI May 19 '22 at 11:05
@MAHAOUEGHLANI yep, edit your question with a github repo, or a codesandbox please. – kissu May 19 '22 at 11:11

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

1 Answers1

Linked