Vue de l'ancre de défilement sur une autre page ?

Question

J'ai un lien de routeur dans le titre de mon site Web qui, une fois cliqué, m'amène à la page /registration qui contient un formulaire. Ce que je veux réaliser, c'est que lorsque je clique dessus, il défile jusqu'au formulaire d'inscription à l'aide du plugin vueScrollTo.

Cela fonctionne maintenant, mais pas à 100 % comme je souhaite qu'il se comporte. Pour l'instant, lorsque je ne suis pas sur la page /registration 页面上并单击时，它会完美滚动到表单，但是当我在 /registration et que je clique, le formulaire défile parfaitement, mais lorsque je suis sur la page

elle-même et que je clique sur le lien du routeur, je reçois un avertissement

Tentative de faire défiler jusqu'à un élément qui n'est pas sur la page : non défini

Je crois que cela se produit parce que je déclenche l'événement pendant le cycle de vie installé. Existe-t-il une meilleure solution pour que cela fonctionne ?

站点标头组件

<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

c'est setTimeout：

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

}

Answer 2

Vous devez d'abord ajouter la configuration suivante dans yarn中添加vue-scrollto，然后在nuxt.config.js

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

Ensuite, ce modèle devrait résoudre le problème

sssccc

J'ai essayé de faire ça depuis une autre page, ça a bien fonctionné, pas besoin d'appeler vue-scrollto，只需使用简单的 <nuxt-link> depuis cette page pour déménager.

---

Cette page de documentation peut vous aider à comprendre $refs : https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements