网页自动跳转到其他页面，点击浏览器返回箭头，回不到原来页面的问题

背景：今天产品提个需求，需要从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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果在index页面，不做任何点击事件，直接等到5秒跳转到test页面，这个时候点击浏览器左上角回退按钮，是回退不到index页面的。这个是浏览器的机制，但其实history是存了Index页面的路由，如果此时不点击浏览器的回退按钮，而是直接点击test页面的‘回到上一页’按钮，是能返回到原来页面的。