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

news2024/9/24 23:22:39

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

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

文章目录

一、前言
二、基本概念
- 1、push 方法
- 2、replace 方法
三、区别与联系
- 1、联系
- 2、区别
四、完整示例
- 1、设置路由
- 2、使用 push 方法
- 3、使用 replace 方法
五、结语

在这里插入图片描述

一、前言

在 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>