vue에서 현재 창을 닫는 방법

Vue는 웹 개발에 널리 사용되는 인기 있는 프런트 엔드 프레임워크입니다. Vue를 사용하여 프로젝트를 개발할 때 데이터 열기, 닫기, 전송 등과 같은 창과 상호 작용해야 하는 경우가 많습니다. 이 글에서는 Vue에서 현재 창을 닫는 방법을 소개합니다.

1. window.close() 사용

기존 웹 개발에서 현재 창을 닫는 가장 일반적인 방법은 window.close() 메서드를 사용하는 것입니다. Vue에서는 이 메서드를 구성 요소에서 직접 사용하여 현재 창을 닫을 수 있습니다.

예를 들어 버튼 클릭 이벤트에 다음 코드를 사용할 수 있습니다.

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

...

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

여기서는 버튼 클릭 이벤트에서 closeCurrentWindow() 메서드를 호출한 다음 window.close()를 사용하여 현재 창을 닫습니다.

window.close() 메서드를 사용할 때는 다음 조건이 충족되어야 한다는 점에 유의하세요.

• 현재 창은 JavaScript로 열려야 합니다.
• 현재 창은 스크립트로 제어해야 합니다.
• 현재 창이 최상위 창(상위 창이 없음)인 경우 창을 닫을 수 없습니다.

2. window.opener 사용

window.close() 메서드를 사용하는 것 외에도 window.opener 속성을 사용하여 현재 창을 닫을 수도 있습니다. window.opener 속성은 상호 작용할 수 있는 현재 창을 여는 창 개체를 가리킵니다.

예를 들어, 상위 창에 closeCurrentWindow() 메서드를 정의하고 이를 하위 창에 전달할 수 있습니다. 자식 창은 window.opener를 통해 부모 창의 메서드를 호출하여 현재 창을 닫을 수 있습니다.

부모 창:

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

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

자식 창:

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

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

자식 창에서는 window.opener를 통해 부모 창의 closeCurrentWindow() 메서드를 호출하여 현재 창을 닫습니다.

window.opener 속성 사용에는 몇 가지 제한 사항이 있다는 점을 참고하세요. 예를 들어 일부 브라우저 환경에서는 호환성 문제가 발생할 수 있습니다.

3. Vue Router 사용

Vue를 사용하여 단일 페이지 애플리케이션을 개발할 때 일반적으로 Vue Router를 사용하여 라우팅을 관리합니다. Vue Router에서는 현재 창을 닫는 기능을 프로그래밍 방식으로 구현할 수 있습니다.

예를 들어 라우팅 구성 요소에서는 $router.go() 메서드를 사용하여 이전 경로를 반환할 수 있습니다. 즉, 현재 창을 닫을 수 있습니다. 코드는 다음과 같습니다.

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

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

$router.go() 메서드를 사용하여 창을 닫을 때 다음 조건이 충족되어야 한다는 점에 유의해야 합니다.

• 현재 창은 단일 경로여야 합니다. -페이지 응용 프로그램.
• $router.go() 메서드를 사용하여 이전 경로로 돌아가서 현재 창을 닫으려면 현재 경로에 이전 기록 기록이 있어야 합니다.

요약

이 기사에서는 Vue에서 현재 창을 닫는 세 가지 방법을 소개합니다.

1. window.close() 메서드 사용
2. window.opener 속성 사용
3. Vue Router를 사용하여 프로그래밍 방식으로 경로 닫기

그 중 window.close() 메서드는 가장 간단한 메서드이지만 몇 가지 제한 사항도 있습니다. window.opener 속성과 Vue Router는 모두 이러한 제한 사항을 더 잘 처리하고 보다 유연한 상호 작용 방법을 제공할 수 있습니다. 독자는 자신의 특정 요구에 따라 현재 창을 닫는 데 가장 적합한 방법을 선택할 수 있습니다.

위 내용은 vue에서 현재 창을 닫는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!