Vue tatal sauh pada halaman lain?
P粉627027031
P粉627027031 2024-02-21 10:17:16
0
2
381

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>
🎜
P粉627027031
P粉627027031

membalas semua(2)
P粉633733146

使用 setTimeout:

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

}

P粉668146636

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!