Multiple page Nav - how to use with <a href="/#foo"> #32

[atiar-cse]

The codes are working but the problem is, when I have the href like <a href="/#anchor">Anchor</a>, it does not seem to work with my codes. If I have the same without the forward slash, it works like <a href="#anchor">Anchor</a>. When visit new route (/contact-us) - it loaded as base_url/contact-us#anchor and never works because the #anchor section inside home page.

I am using vue-router.

Any help will be appreciated.

[smuriu]

Hi, just came across this issue. I faced a similar challenge in a nuxt 3 app. My solution was to add an event listener that would look at the route hash parameter, then programatically scrollTo the target (see below)

// ~/plugins/vue-scrollto.ts

import VueScrollTo from 'vue-scrollto'

export default defineNuxtPlugin(({ vueApp, hook }) => {
  vueApp.use(VueScrollTo)

  hook('page:finish', () => {
    const { hash } = useRoute()
    if (hash) {
      VueScrollTo.scrollTo(hash)
    }
  })
})