【Vue3-Router】历史记录

replace

App.vue

<template>
  <h1>hello worldh1>
  <div>
      
    <router-link replace to="/">loginrouter-link>
    <router-link replace style="margin-left: 10px;" to="/reg">regrouter-link>

    <button style="margin-left: 10px;" @click="toPage('/')">Loginbutton>
      <button style="margin-left: 10px;" @click="toPage('/reg')">Regbutton>
  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 worldh1>
  <div>
    
    <router-link  to="/">loginrouter-link>
    <router-link  style="margin-left: 10px;" to="/reg">regrouter-link>

    <button style="margin-left: 10px;" @click="toPage('/')">Loginbutton>
    <button style="margin-left: 10px;" @click="toPage('/reg')">Regbutton>

    <button style="margin-left: 10px;" @click="next()">nextbutton>
    <button style="margin-left: 10px;" @click="prev()">prevbutton>
  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>