Vue Router for a div

Question

i have a home.vue component and inside the template i have multiple div’s with class names and ids and i have navigation links which i wanted to click and route to that certain div using the classnames or id’s is there anyway to do using vue-router ?

i tried out to use

 <li><router-link to="#about" >About Us</router-link></li>

for routing it to #aboutus id of the div but i cannot do it and i searched internet , didnt find any useful resource help me out . check out the imgur image here

Andrew1325 Andrew1325 · Accepted Answer · 2018-11-10T05:03:54

You don't need vue router for this. All you are doing is trying to scroll to a div on your page so why not try something like this:

<li>
   <a href="#" @click.prevent="goToDiv"><span>Go To</span></a>
</li>

and in your script:

methods: {
    goToDiv() {
      var elmnt = document.getElementById("yourId");
      elmnt.scrollIntoView();
    },
}

Vue Router for a div

1 Answers