vue3 페이지 몇초후 이동

#1. vue3 페이지 몇초후 이동

<template>
  <div>
    <h2>홈 페이지</h2>
    <p>현재 페이지는 홈입니다. 몇 초 후에 자동으로 이동합니다.</p>
  </div>
</template>
 
<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
 
const router = useRouter();
 
const navigateToAbout = () => {
  router.push({ name: 'About' });
};
 
onMounted(() => {
  const interval = setInterval(navigateToAbout, 5000);
 
  onUnmounted(() => {
    clearInterval(interval);
  });
});
</script>

 

 

#2. vue3 페이지 몇초후 이동 + 버튼클릭, 인풋 입력 이벤트 발생시 페이지 이동하는 시간 늘림

<template>
  <div>
    <h2>홈 페이지</h2>
    <p>현재 페이지는 홈입니다. 버튼 클릭이나 입력이 없으면 자동으로 이동합니다.</p>
    <button @click="resetTimer">버튼 클릭</button>
    <input v-model="inputValue" @input="resetTimer" placeholder="입력하세요" />
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
 
const router = useRouter();
const inputValue = ref('');
let timer = null;
const delay = 10000; // 페이지 이동 지연 시간 (10초)
 
const navigateToAbout = () => {
  router.push({ name: 'About' });
};
 
const resetTimer = () => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(navigateToAbout, delay);
};
 
onMounted(() => {
  // 페이지가 마운트될 때 타이머 설정
  resetTimer();
});
 
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
  }
});
</script>