다른 페이지에 Vue 스크롤 앵커가 있습니까?

Question

내 웹사이트 제목에 라우터 링크가 있는데, 클릭하면 양식이 있는 페이지로 연결됩니다 /registration. 내가 달성하고 싶은 것은 클릭하면 vueScrollTo 플러그인을 사용하여 등록 양식으로 스크롤된다는 것입니다.

지금은 작동하지만 제가 원하는 대로 100% 작동하지는 않습니다. 현재는 /registration 页面上并单击时，它会完美滚动到表单，但是当我在 /registration 페이지가 아닌 곳에서 클릭하면 양식까지 완벽하게 스크롤되는데,

페이지 자체에 있는 상태에서 라우터 링크를 클릭하면 경고가 뜹니다

페이지에 없는 요소로 스크롤 시도: 정의되지 않음

설치된 수명 주기 동안 이벤트를 트리거하기 때문에 이런 일이 발생한다고 생각합니다. 작동하도록 하는 더 나은 솔루션이 있습니까?

站点标头组件

으아악 注册页面组件

<template>
  <router-link to="/registration"
    class="nav-row--primary__button"
    @click.native="scrollToRegForm()"
  >
    Sign up
  </router-link>
</template>

<script>
export default {
  mounted() {
    if (window.location.href.indexOf("/registration") > 0) {
      const regForm = document.getElementById("regForm");
      setTimeout(() => this.scrollToRegForm(regForm), 1);
    }
  },
  methods: {
    scrollToRegForm(element) {
      VueScrollTo.scrollTo(element, 1000);
    }
  }
}

🎜

Answer 1

使사용 setTimeout：

으아아아

}

Answer 2

먼저 yarn中添加vue-scrollto，然后在nuxt.config.js

에 다음 구성을 추가해야 합니다. 으아악

그렇다면 이 템플릿으로 문제를 해결해 보세요

으아악

다른 페이지에서 이 작업을 시도했지만 잘 작동했습니다. 이동하기 위해 이 페이지에서 vue-scrollto，只需使用简单的 <nuxt-link>를 호출할 필요가 없습니다.

---

이 문서 페이지는 이해하는 데 도움이 될 수 있습니다. $refshttps://v2.vuejs.org/v2/guide/comComponents-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements