Navigate to another page to a specific section in vue

user_12763413 0
Viewed 993

I have two different page

about.vue

<template>
 <div>
  <a class="headers" href="javascript:document.getElementById('steps').scrollIntoView(true);">Availability
  </a>
 </div>
</template>

home.vue

<template>
 <div>
  <p>This is the home page</p>
  <Services id="services"></Services>
  <Steps id="steps"></Steps>
 </div>
</template>

<script>
  import Steps from 'views/home/steps.vue';
  import Services from 'views/home/services.vue';
  export default {
   components: {
    Services,
    Steps
   },
  }
</script>

I have a link on about page where when I click it should take me to the steps sections on the home. How can I achieve this.

vue-router vue.js href javascript
1 Answers

about.vue

<template>
 <div>
  <router-link class="headers"
    :to="{name: 'home', hash: '#steps'}">
    Availability
  </router-link>
 </div>
</template>

and in your file which register Vue-Router

const router = new VueRouter({
  mode: 'history',
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      return {
        selector: to.hash
      }
    }
  }
});

more info -> here

user_105190690
Related