背景:今天产品提个需求,需要从index页面自动触发跳转到下一页面的事件,从而不做任何操作,直接跳转到test页面。
代码是这样的:
index.vue:
<template>
<div style="width:500px;height:600px;background-color: aqua;">
<el-button @click="toNext">下一页</el-button>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const toNext = () => {
router.push({ path: '/quotaControl/test' })
}
// 到此页面后间隔5S自动跳转到下一页面
onMounted(() => {
setTimeout(() => {
toNext()
}, 5000)
})
</script>
test.vue:
<template>
<div>test页面</div>
<el-button @click="toBack">回到上一页</el-button>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const toBack = () => {
router.go(-1)
}
</script>
如果在index页面,不做任何点击事件,直接等到5秒跳转到test页面,这个时候点击浏览器左上角回退按钮,是回退不到index页面的。这个是浏览器的机制,但其实history是存了Index页面的路由,如果此时不点击浏览器的回退按钮,而是直接点击test页面的‘回到上一页’按钮,是能返回到原来页面的。