[Vuejs]-Vue Js History mode is not removing # when using # ids in menu links

by

1👍

✅

it bcs your tag contain # in a href=”#”.

its not part VueRouter, you need to remove it and make new function to scroll to specific area or div.

let say:

<a class="btn tell-me btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>

You need to remove the ‘#’ inside the ‘href’ then add @click=”goToSection(‘yourAreaWantToJump’)”
then need to add scroller to specific div. in this case u need to scroll to section ‘services’

👤Maulana Yusup Abdullah

2👍

In Nav.vue your navList array containing the paths has a #. The paths has to be identical with the path you defined on your router.js. Try changing your array

from:

navList: [
      {
        name: "Services",
        path: "#services"
      },
      {
        name: "Portfolio",
        path: "#portfolio"
      },
      {
        name: "About",
        path: "#about"
      },
      {
        name: "Team",
        path: "#team"
      },
      {
        name: "Contact",
        path: "#contact"
      }
    ]

to

navList: [
      {
        name: "Services",
        path: "/services"
      },
      {
        name: "Portfolio",
        path: "/portfolio"
      },
      {
        name: "About",
        path: "/about"
      },
      {
        name: "Team",
        path: "/team"
      },
      {
        name: "Contact",
        path: "/contact"
      }
    ]

if you can’t modify the array try modifing the string like:

<router-link :to="linkObj.path.replace('#','/')">{{ linkObj.name }}</router-link>

Conclusion

For routing Navigation to render other components in the <router-view /> tag, try to use exclusive the <router-link to="/path"> tag. The <a href="/path"> tag will also navigate you but this will reload the page.

If you want to navigate to anchors in your page you can still use the <a href="#anchorId">

👤Andres Abadia

Leave a comment