Vue tatal sauh pada halaman lain?

Question

Saya mempunyai pautan penghala dalam tajuk laman web saya yang apabila diklik membawa saya ke halaman /registration yang mempunyai borang di atasnya. Apa yang saya ingin capai ialah apabila diklik ia menatal ke borang pendaftaran menggunakan pemalam vueScrollTo.

Ia berfungsi sekarang, tetapi bukan 100% seperti yang saya mahukan. Buat masa ini, apabila tidak berada di halaman /registration 页面上并单击时，它会完美滚动到表单，但是当我在 /registration dan mengklik, ia menatal ke borang dengan sempurna, tetapi apabila saya berada di halaman

itu sendiri dan klik pada pautan penghala, saya mendapat amaran

Cuba untuk menatal ke elemen yang tiada pada halaman: undefined

Saya percaya ini berlaku kerana saya mencetuskan acara semasa kitaran hayat yang dipasang. Adakah terdapat penyelesaian yang lebih baik untuk menjadikannya berfungsi?

站点标头组件

<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

Mula-mula anda perlu menambah konfigurasi berikut dalam yarn中添加vue-scrollto，然后在nuxt.config.js

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

Kemudian, templat ini harus menyelesaikan masalah

sssccc

Cuba melakukan ini dari halaman lain, ia berfungsi dengan baik, tidak perlu memanggil vue-scrollto，只需使用简单的 <nuxt-link> dari halaman ini untuk bergerak.

---

Halaman dokumentasi ini boleh membantu anda memahami $refs: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements