Vue-Scroll-Anker auf einer anderen Seite?

Question

Ich habe im Titel meiner Website einen Router-Link, der mich, wenn ich darauf klicke, zu der Seite /registration weiterleitet, auf der sich ein Formular befindet. Was ich erreichen möchte, ist, dass beim Klicken mit dem vueScrollTo-Plugin zum Registrierungsformular gescrollt wird.

Es funktioniert jetzt, aber nicht zu 100 % so, wie ich es möchte. Wenn ich mich derzeit nicht auf der /registration 页面上并单击时，它会完美滚动到表单，但是当我在 /registration-Seite befinde und darauf klicke, scrollt es perfekt zum Formular, aber wenn ich auf der

-Seite selbst bin und auf den Router-Link klicke, erhalte ich eine Warnung

Versuchen Sie, zu einem Element zu scrollen, das sich nicht auf der Seite befindet: undefiniert

Ich glaube, dass das passiert, weil ich das Ereignis während des installierten Lebenszyklus auslöse. Gibt es eine bessere Lösung, damit es funktioniert?

站点标头组件

<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);
    }
  }
}

注册页面组件

<div class="container--content spacing-ie" id="regForm">
  <RegistrationForm />
</div>

🎜

Answer 1

使用 setTimeout：

methods: {
scrollToRegForm(element) {
  this.$router.push('/regForm')
  setTimeout(() =>{
    VueScrollTo.scrollTo(element, 1000);
  }, 1000)
}

}

Answer 2

首先需要在yarn中添加vue-scrollto，然后在nuxt.config.js中添加以下配置

{
  modules: [
    'vue-scrollto/nuxt',
  ]
}

那么，这个模板应该可以解决问题

尝试从另一个页面进行此操作，效果很好，也无需从此页面调用 vue-scrollto，只需使用简单的 <nuxt-link> 即可移动。

---

此文档页面可以帮助您了解 $refs: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements