时间戳

首页 > 解决方案 > 导航到另一个页面到 vue 中的特定部分

javascript - 导航到另一个页面到 vue 中的特定部分

问题描述

我有两个不同的页面

关于.vue

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

家.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>

我在关于页面上有一个链接，当我点击它时，它应该带我到主页上的步骤部分。我怎样才能做到这一点。

标签： javascriptvue.jsvue-routerhref

解决方案

关于.vue

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

并在您注册Vue-Router的文件中

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

更多信息->在这里

推荐阅读