【Vue-Router】历史记录

replace

浏览器的历史记录有两种写入方式：分别为push和replace：

• push是追加历史记录（默认值）。
• replace是替换当前记录（即无历史，back退回不到无历史的页面）。

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>