CODEWITHSUNDEEP
vue.jsnuxt.js
Vectrobyte
Vectrobyte

Reputation: 1475

<NuxtLink /> not is not providing internal link like an anchor tag

I have a link defined in nuxt pages like this:

<NuxtLink to="/#section-x">Section X</NuxtLink>

The link is actually added to the menu in my global layout file. When I try to click the link from a page different than a root page (/any-path) the link is taking me back to the landing page and displaying the section as expected. But when I try to click the link from the root page (/), it's not performing any navigation.

I tried using anchor tag in the same way: 

<a href="/#section-x">Section X</NuxtLink>

The anchor tag will work fine for the root page internal navigation but when clicked from a different page, it will provide a navigation to the root page but not to the internal link(e.g. #section-x).

Is there any way to use the or tag and providing an internal html navigation too from any pages as it should?

Upvotes: 3

Views: 1391

Answers (1)

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

According to this, installing vue-scroll-to package

You could give this a shot

<nuxt-link
   :to="{path: '/', hash: 'section-x'}" 
   v-scroll-to="{el: '#section-x'}
">
  Section X
</nuxt-link>

I don't know how to Do it without adding more dependencies but I hope it helps

Upvotes: 3

Related Questions