历史记录

不同的历史模式 | Vue Router (vuejs.org) (opens new window)

# replace

采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；

# 使用方法

# router-link

<router-link replace to="/">Login</router-link>
<router-link replace style="margin-left:10px" to="/reg">Reg</router-link>

1
2

# 编程式导航

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

import { useRouter } from 'vue-router'
const router = useRouter()

const toPage = (url: string) => {
  router.replace(url)
}

1
2
3
4
5
6
7
8
9

# 横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

<button @click="next">前进</button>
<button @click="prev">后退</button>

const next = () => {
	// 前进 数量不限于1
	router.go(1)
}

const prev = () => {
	// 后退
	router.back()
}

1
2
3
4
5
6
7
8
9
10
11
12

上次更新: 2024/08/14, 04:14:33

← 命名路由路由传参→