replace

App.vue

<template><h1>hello world</h1><div><!-- replace 不保存历史记录 --><router-link replace to="/">login</router-link><router-link replace style="margin-left: 10px;" to="/reg">reg</router-link><button style="margin-left: 10px;" @click="toPage('/')">Login</button><button style="margin-left: 10px;" @click="toPage('/reg')">Reg</button></div><hr><router-view></router-view>
</template><script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const toPage = (path: string) => {// 同样，replace 不保存历史记录router.replace(path)
}
</script><style scoped></style>

反复点两个 router-link 或者两个按钮，左右箭头仍未不可点击状态，说明无残留历史记录。

go / back

App.vue

<template><h1>hello world</h1><div><!-- replace 不保存历史记录 --><router-link  to="/">login</router-link><router-link  style="margin-left: 10px;" to="/reg">reg</router-link><button style="margin-left: 10px;" @click="toPage('/')">Login</button><button style="margin-left: 10px;" @click="toPage('/reg')">Reg</button><button style="margin-left: 10px;" @click="next()">next</button><button style="margin-left: 10px;" @click="prev()">prev</button></div><hr><router-view></router-view>
</template><script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const toPage = (path: string) => {// 同样，replace 不保存历史记录router.push(path)
}// 保留历史记录，控制页面前进、返回的跳转
const next = () => {router.go(1)
}
const prev = () => {router.back(1)
}
</script><style scoped></style>