【vue3|第21期】Vue3中Vue Router的push和replace方法详解

日期：2024年8月9日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

---

在 Vue.js 的世界里，Vue Router 扮演着至关重要的角色，特别是在单页面应用（SPA）的开发中。Vue Router 不仅负责页面之间的跳转，还管理着页面的生命周期和状态。在 Vue3 中，Vue Router 提供了多种导航方式，其中最基本也最重要的是 push 和 replace 方法。这两种方法虽然目的相同，即进行页面跳转，但它们对浏览器历史栈的处理却大相径庭。

二、基本概念

---

1、push 方法

push 方法，从字面上理解，就是“推”一个新的记录到历史栈。在 Vue Router 中，当你使用router.push() 进行页面跳转时，这个新页面的 URL 会被添加到浏览器的历史记录中。这意味着用户可以点击浏览器的后退按钮，回到之前的页面。

形式	语法	示例
声明式	<RouterLink :to="xxx">	<RouterLink to="/home">首页</RouterLink>
编程式	router.push(xxx)	router.push({ name: "home" });

2、replace 方法

与 push 不同，replace 方法虽然也会进行页面跳转，但是不会向历史记录中添加新记录，而是替换当前的记录。在使用 router.replace() 进行导航时，新的 URL 会替代当前页面的URL 记录。这意味着用户无法通过后退按钮回到之前的页面。

形式	语法	示例
声明式	<RouterLink :to="xxx" replace>	<RouterLink to="/home" replace>首页</RouterLink>
编程式	router.replace(xxx)	router.replace({ name: "home" });

三、区别与联系

---

1、联系

• 两者都是 Vue Router 提供的编程式导航方法，可以在 JavaScript 代码中直接调用。
• 两者都可以用于改变当前路由，并导航到新的路由地址。

2、区别

内容	push	replace
添加历史记录	是	否
后退按钮行为	可以回到上一页	不能回到上一页
适用场景	常规页面跳转	无后退需求的跳转

四、完整示例

---

下面，我们将通过一些简单的示例来展示 push 和 replace 方法在实际应用中的使用。

1、设置路由

首先，我们需要定义一些路由。假设我们有以下两个组件：Home.vue 和 About.vue。

• src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

• src/main.js

import { createApp } from 'vue'
import App from './App.vue'

// import router from '@/router/index'
import router from '@/router'

const app = createApp(App)
app.use(router)
app.mount('#app')

2、使用 push 方法

在组件中，我们可以通过 this.$router.push 来导航到不同的路由。

<template>
    <button @click="goToHome">首页</button>
</template>

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

function goToHome() {
	router.push({ path: '/' });
	// 也可以名字跳转
	// router.push({ name: 'Home' });
}
</script>

在上面的例子中，点击按钮会导航到主页，并在历史记录中添加一条新记录。

3、使用 replace 方法

同样地，我们可以使用 router.replace 来替换当前的历史记录。

<template>
    <button @click="goToAbout">关于(Replace)</button>
</template>

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

function goToAbout() {
	router.replace({ path: '/about' });
	// 也可以名字跳转
	// router.replace({ name: 'About' });
}
}
</script>

在这个例子中，点击按钮会导航到关于页，但不会在历史记录中添加新记录。如果用户尝试点击后退按钮，他们将不会返回到前一个页面。

五、结语

---

通过上述讲解，我们可以看到 push 和 replace 方法在 Vue Router 中的不同用途。push 方法适用于大多数导航情况，而 replace 方法则适用于那些不需要用户返回的情况，如登录后的重定向。了解这两个方法的使用场景，可以帮助我们更好地控制应用的路由行为。

---

参考文章：s

• 《Vue Router》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/141059537