在 Vue 中关闭当前弹窗页面可以通过以下两种方式实现:
1、使用关闭按钮触发关闭事件
在弹窗组件中添加一个关闭按钮,并在点击事件中调用关闭弹窗的方法。例如:
<template> <div class="modal"> <div class="modal-content"> <span class="close" @click="closeModal">×</span> <p>弹窗内容</p> </div> </div> </template> <script> export default { methods: { closeModal() { this.$emit('close'); } } } </script>
在父组件中监听关闭事件,并将弹窗的显示状态设置为 false。例如:
<template> <div> <button @click="showModal = true">打开弹窗</button> <modal v-if="showModal" @close="showModal = false"></modal> </div> </template> <script> import Modal from './Modal.vue'; export default { components: { Modal }, data() { return { showModal: false } } } </script>
2、使用路由守卫关闭弹窗
在打开弹窗的路由中添加一个 beforeRouteLeave 路由守卫,当离开该路由时关闭弹窗。例如:
const router = new VueRouter({ routes: [ { path: '/modal', component: Modal, beforeRouteLeave(to, from, next) { this.$emit('close'); next(); } } ] });
在父组件中监听关闭事件,并在关闭事件中调用关闭弹窗的方法。例如:
<template> <div> <button @click="showModal = true">打开弹窗</button> <modal v-if="showModal" @close="showModal = false"></modal> </div> </template> <script> import Modal from './Modal.vue'; export default { components: { Modal }, data() { return { showModal: false } } } </script>
以上两种方式都可以实现关闭当前弹窗页面的功能,具体使用哪种方式取决于项目需求和个人习惯。