来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

replace

采用replace进行页面的跳转，不会在history中保存记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div>
    <h1>Vue-Router test</h1>
    <div>
      <!-- router-link中使用replace -->
      <router-link replace to="/">login</router-link>
      <router-link replace to="/reg" style="margin-left: 10px;">reg</router-link>

      <button @click="toPage('/')">login</button>
      <button @click="toPage('/reg')">reg</button>

      <button @click="next">next</button>
      <button @click="prev">prev</button>
    </div>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const toPage = (str:string)=> {
  // 编程式导航中使用replace
  router.replace(str)
}
</script>

go和back

编程式控制历史记录的前进或后退

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div>
    <h1>Vue-Router test</h1>
    <div>
      <router-link to="/">login</router-link>
      <router-link to="/reg" style="margin-left: 10px;">reg</router-link>

      <button @click="next">next</button>
      <button @click="prev">prev</button>
    </div>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const next = ()=> {
  // 前进n个历史记录
  router.go(1)
}

const prev = ()=> {
  // router.go(-1)
  // 后退一个历史记录
  router.back()
}
</script>