历史记录

不保存历史记录

我们通过普通的方式进行路由跳转是会生成历史记录的，生成了历史记录就可以通过浏览器左上角的⬅和➡进行前进或后退，比如：<router-link to="/">、push等。

那假如我们不需要生成历史记录，需要用什么方式去进行路由之间的跳转呢？

replace

声明式导航：

所谓的声明式导航就是使用router-link组件进行路由跳转的方式。

使用router-link组件进行路由跳转不生成历史记录的方式：给router-link组件加上replace属性即可。
```
<template>
    
    <router-link replace to="/login" />
</template>
```
像上面这样给router-link组件加上replace属性以后，浏览器就不会生成历史记录了。
编程式导航

所谓的编程式导航就是在js逻辑中进行路由跳转的方式，例如：router.push()，但是前面提到，使用router.push()这种方式进行路由跳转，浏览器是会生成历史记录的，那么不需要浏览器生成历史记录我们就需要使用router.replace() 的方式进行路由跳转。
```
/** 跳转到登录页 */
function toLogin () {
    router.replace('/login')
}
```

forward()、back()、go()

方法	说明
`forward()`	相当于浏览器左上角的➡，用于前进一个历史页面
`back()`	相当于浏览器左上角的⬅，用于后退一个历史页面
`go(n)`	用于前进/后退n个历史页面，传入的n是多少就前进/后退多少个历史页面

<template>
  <div>
    <button @click="forwradPage">前进一个页面 forward()</button>
    <button @click="backPage">后退一个页面 back()</button>
    <button @click="forwardAnyPage">前进2个页面--go(2)</button>
    <button @click="backAnyPage">后退2个页面--go(-2)</button>
  </div>
</template>
<script setup lang="ts">
    import { useRouter } from 'vue-router'
    const router = useRouter()
    .....
</script>

forward():

/** 前进一个页面 */
const forwradPage = () => {
  router.forward()
}

back():

/** 后退一个页面 */
const backPage = () => {
  router.back()
}

go(n):

/** 前进2个页面 */
const forwardAnyPage = () => {
  router.go(2)
}
/** 后退2个页面 */
const backAnyPage = () => {
  router.go(-2)
}

第三章-历史记录

历史记录

不保存历史记录

replace

forward()、back()、go()