vue3延迟3秒跳转页面代码
时间: 2024-09-20 19:02:17 浏览: 9
在 Vue3 中,你可以使用 `v-if` 或者 `v-show` 结合 `setTimeout` 实现页面跳转前的延迟。这里是一个简单的例子:
```html
<template>
<button @click="delayedRedirect">点击跳转</button>
</template>
<script>
export default {
methods: {
delayedRedirect() {
// 使用 v-if 来阻止默认的跳转行为
// 并在 3 秒后改变这个条件来触发跳转
this.$router.replace('/target') // 这里替换为目标路由
.then(() => {
setTimeout(() => {
this.$el.v-if = false; // 当跳转完成时隐藏当前元素
}, 3000);
});
// 或者使用 v-show 和 promise 包裹
// this.$router.replace('/target')
// .then(() => {
// this.$nextTick(() => {
// setTimeout(() => {
// this.$el.show(); // 切换到新页面后显示新内容
// this.$el.style.display = 'none'; // 隐藏旧内容
// }, 3000);
// });
// });
}
}
};
</script>
```
在这个示例中,当你点击按钮时,会先尝试跳转到目标页面。然后使用 `setTimeout` 设置延迟3秒,当延迟结束时,如果使用了 `v-if`,则会将当前元素设置为不可见;如果是 `v-show`,则切换到新页面并隐藏当前元素。