cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk menghalang halaman daripada menatal selepas perubahan laluan dalam Nuxt?

Saya ada projek Nuxt. Apabila saya pergi dari http://localhost:3000/catalog/postery更改路由到http://localhost:3000/catalog/postery/all?photos%5B%5D=262, halaman saya menatal ke atas, hanya selepas laluan saya berubah

Fail saya scrollBehavior.js:

export default async function (to, from, savedPosition) {
  
  if (
    (to.path.indexOf("/catalog/") !== -1 &&
      to.path.indexOf("/all") === -1 &&
      Object.keys(to.query).length > 0) || 
    (to.path.indexOf("/search") !== -1 && Object.keys(to.query).length > 0) || 
    (to.name === "product-type-id" && Object.keys(to.query).length > 0) || 
    (from.name === "product-type-id" &&
      to.name === "product-type-id" &&
      to.params.type != from.params.type) 
  ) {
    return;
  }

  if (to.path.indexOf("/catalog/") !== -1 && savedPosition != null) {
    return { x: 0, y: savedPosition.y };
  }

  return { x: 0, y: 0 };
}

Bagaimanakah cara saya menghalang halaman daripada menatal ke atas sebelum menukar laluan?

P粉865900994P粉865900994469 hari yang lalu830

membalas semua(1)saya akan balas

  • P粉147747637

    P粉1477476372023-11-07 14:51:34

    Jadi, anda mahukan:

    • Klik pautan
    • Mulakan halaman rendering
    • Skrol ke atas

    Daripada dokumentasi Vue Router, anda boleh menggunakan kod seperti ini

    /app/router.scrollBehavior.js

    export default function () {
      return { x: 0, y: 0, behavior: 'smooth' }
    }
    

    Anda juga boleh menggunakan syarat atau setTimeout untuk mencapai

    export default function (to, from, savedPosition) {
      if (to.path === '/my-cool-path') {
        return { x: 0, y: 0, behavior: 'smooth' }
      }
    }
    
    export default function (to, from, savedPosition) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ x: 0, y: 0, behavior: 'smooth' })
        }, 2000)
      })
    }
    

    Jawapan ini menggunakan vue-scrollto mungkin juga membantu.

    Pilihan terakhir ialah menggunakan beberapa Kesan Peralihan untuk menyembunyikan gegaran/pemuatan hodoh, yang sebenarnya boleh menjadi sangat menarik.

    balas
    0
  • Batalbalas