背景:今天产品提个需求,需要从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页面的‘回到上一页’按钮,是能返回到原来页面的。