Bagaimana untuk menutup tetingkap semasa dalam vue

Vue ialah rangka kerja bahagian hadapan yang popular digunakan secara meluas dalam pembangunan web. Apabila menggunakan Vue untuk membangunkan projek, anda sering perlu berinteraksi dengan tingkap, seperti membuka, menutup, memindahkan data, dsb. Artikel ini akan memperkenalkan cara menutup tetingkap semasa dalam Vue.

1. Gunakan window.close()

Dalam pembangunan web tradisional, cara paling biasa untuk menutup tetingkap semasa ialah menggunakan kaedah window.close(). Dalam Vue, kita boleh menggunakan kaedah ini terus dalam komponen untuk menutup tetingkap semasa.

Sebagai contoh, kita boleh menggunakan kod berikut dalam acara klik butang:

<button @click="closeCurrentWindow">关闭窗口</button>

...

methods: {
    closeCurrentWindow() {
        window.close();
    },
}

Di sini dengan memanggil kaedah closeCurrentWindow() dalam acara klik butang, dan kemudian menggunakan window.close ( ) untuk menutup tetingkap semasa.

Perlu diambil perhatian bahawa syarat berikut mesti dipenuhi apabila menggunakan kaedah window.close():

• Tetingkap semasa mesti dibuka oleh JavaScript.
• Tetingkap semasa mesti dikawal oleh skrip.
• Jika tetingkap semasa ialah tetingkap peringkat atas (tiada tetingkap induk), tetingkap itu tidak boleh ditutup.

2. Gunakan window.opener

Selain menggunakan kaedah window.close(), kita juga boleh menggunakan sifat window.opener untuk menutup arus tingkap. Sifat window.opener menghala ke objek tetingkap yang membuka tetingkap semasa, yang melaluinya kita boleh berinteraksi.

Sebagai contoh, kita boleh mentakrifkan kaedah closeCurrentWindow() dalam tetingkap induk dan menghantarnya ke tetingkap anak. Tetingkap anak boleh memanggil kaedah dalam tetingkap induk melalui window.opener untuk menutup tetingkap semasa.

Tetingkap ibu bapa:

<template>
    <div>
        <button @click="openNewWindow">打开新窗口</button>
    </div>
</template>

<script>
export default {
    methods: {
        openNewWindow() {
            window.open('newWindow.html', '_blank');
        },
        closeCurrentWindow() {
            window.close();
        }
    }
}
</script>

Tetingkap anak:

<template>
    <div>
        <button @click="closeWindow">关闭窗口</button>
    </div>
</template>

<script>
export default {
    methods: {
        closeWindow() {
            window.opener.closeCurrentWindow();
        }
    }
}
</script>

Dalam tetingkap anak, kami memanggil kaedah closeCurrentWindow() dalam tetingkap induk melalui window.opener Tutup tetingkap semasa.

Perlu diambil perhatian bahawa menggunakan sifat window.opener juga mempunyai beberapa had, seperti isu keserasian yang mungkin berlaku dalam sesetengah persekitaran penyemak imbas.

3. Menggunakan Penghala Vue

Apabila membangunkan aplikasi satu halaman menggunakan Vue, kami biasanya menggunakan Penghala Vue untuk mengurus penghalaan. Dalam Vue Router, fungsi menutup tetingkap semasa boleh dilaksanakan secara pemrograman.

Sebagai contoh, dalam komponen penghalaan, kita boleh menggunakan kaedah $router.go() untuk mengembalikan laluan sebelumnya, iaitu menutup tetingkap semasa. Kodnya adalah seperti berikut:

<template>
    <div>
        <button @click="closeWindow">关闭窗口</button>
    </div>
</template>

<script>
export default {
    methods: {
        closeWindow() {
            this.$router.go(-1);
        }
    }
}
</script>

Perlu diambil perhatian bahawa apabila menggunakan kaedah $router.go() untuk menutup tetingkap, syarat berikut perlu dipenuhi:

• Tetingkap semasa mestilah satu halaman A laluan dalam aplikasi.
• Laluan semasa mesti mempunyai rekod sejarah sebelumnya sebelum anda boleh menggunakan kaedah $router.go() untuk kembali ke laluan sebelumnya dan menutup tetingkap semasa.

Ringkasan

Artikel ini memperkenalkan tiga kaedah untuk menutup tetingkap semasa dalam Vue:

1. Gunakan kaedah window.close()
2. Gunakan sifat window.opener
3. Gunakan Penghala Vue untuk menutup penghalaan secara pengaturcaraan

Antaranya, kaedah window.close() ialah kaedah paling mudah, tetapi ia juga mempunyai beberapa batasan. Kedua-dua sifat window.opener dan Vue Router boleh mengendalikan had ini dengan lebih baik dan menyediakan kaedah interaksi yang lebih fleksibel. Pembaca boleh memilih kaedah yang paling sesuai untuk mereka untuk menutup tetingkap semasa mengikut keperluan khusus mereka.

Atas ialah kandungan terperinci Bagaimana untuk menutup tetingkap semasa dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!