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

日期:2024年8月9日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 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 提供了多种导航方式,其中最基本也最重要的是 pushreplace 方法。这两种方法虽然目的相同,即进行页面跳转,但它们对浏览器历史栈的处理却大相径庭。

二、基本概念


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、区别

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

四、完整示例


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

1、设置路由

首先,我们需要定义一些路由。假设我们有以下两个组件:Home.vueAbout.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>

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

五、结语


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


参考文章:s

  • 《Vue Router》

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/396007.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

需求分析-系统架构师(四十六)

软件需求 软件需求&#xff1a;对系统在功能、行为、性能、设计约束等方面的期望。 分为 需求开发 和 需求管理 两大类。 需求分为 业务需求&#xff0c;用户需求&#xff0c;系统需求。 业务需求&#xff1a;企业或者客户对系统高层次的目标要求。 用户需求&#xff1a;用…

C#图片批量下载Demo

目录 效果 项目 代码 下载 效果 C#图片批量下载 项目 代码 using Aspose.Cells; using NLog; using System; using System.Collections.Generic; using System.Data; using System.Diagnostics; using System.Drawing; using System.IO; using System.Linq; using System.…

git强制推送代码教程

git强制推送代码教程 首先说明情况&#xff0c;我的代码remote了两个git库&#xff0c;现在想要推送到其中一个&#xff0c;但是版本不对&#xff0c;被拒绝&#xff0c;因此下面将进行强制推送 首先检查远程库都有哪些 git remote -v2. 检查当前的分支 git branch当前分支前…

八股总结----计算机网络

1.UDP头部格式 UDP的头部比较简单&#xff0c;只有8个字节&#xff0c;这也是为什么UDP不能像TCP那样实现可靠传输的原因。源端口和目标端口表示数据传输的来源和去向&#xff0c;包长度表示数据报文的总长度&#xff08;包含了头部和数据部分&#xff09;&#xff0c;方便接收…

stm32程序调试方式(OLED显示屏调试以及Keil调试模式)

文章目录 前言一、调试的方式二、OLED显示屏调试2.1 OLED简介2.2 OLED硬件电路2.3 OLED驱动函数介绍2.4 OLED显示屏应用案例代码 三、Keil调试模式总结 前言 提示&#xff1a;本文主要用作在学习江协科大STM32入门教程后做的归纳总结笔记&#xff0c;旨在学习记录&#xff0c;…

基于GeoTools使用JavaFx进行矢量数据可视化实战

目录 前言 一、JavaFx展示原理说明 二、GeoTools的Maven依赖问题 三、引入Geotools相关的资源包 四、创建JavaFx的Canvas实例 五、JavaFx的Scene和Node的绑定 六、总结 前言 众所周知&#xff0c;JavaFx是Java继Swing之后的又一款用于桌面应用的开发利器。当然&#xff0…

9.C基础_指针与数组

数组指针&#xff08;一维数组&#xff09; 数组指针就是" 数组的指针 "&#xff0c;它是一个指向数组首地址的指针变量。 1、数组名的含义 对于一维数组&#xff0c;数组名就是一个指针&#xff0c;指向数组的首地址。 基于如下代码进行分析&#xff1a; int a…

语言模型-神经网络模型(二)

神经网络模型语言模型 神经网络模型神经网络的分类神经网络模型和Ngram对比应用一-话者分离对比优劣 应用二-数字归一化应用三-文本打标 神经网络模型 释义&#xff1a; 与ngram模型相似使用&#xff0c;前n个词预测下一个词&#xff0c;输出在字表上的概率分布&#xff1b;过…

如何设置 Visual Studio Code 的滚轮缩放功能

Visual Studio Code (VSCode) 是一个强大的代码编辑器&#xff0c;提供了许多便捷的功能来提高开发效率。其中之一就是通过滚轮缩放字体大小。以下是详细的设置步骤&#xff1a; 步骤 1&#xff1a;打开设置页面 首先&#xff0c;启动 Visual Studio Code。在左上角点击 “文…

【机器学习基础】线性回归

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈Python机器学习 ⌋ ⌋ ⌋ 机器学习是一门人工智能的分支学科&#xff0c;通过算法和模型让计算机从数据中学习&#xff0c;进行模型训练和优化&#xff0c;做出预测、分类和决策支持。Python成为机器学习的首选语言&#xff0c;…

集成视触觉传感器的机器人操作学习

强化学习是一种仿人学习的方法&#xff0c;其在不断与环境交互试错的过程中进行学习&#xff0c;提高自身的认知。其具有如下的优点&#xff0c;首先是数据依赖性低&#xff0c;强化学习通过与环境的交互来学习&#xff0c;减少了对标记数据的依赖性&#xff0c;可以大量的减少…

Linux 系统框架分析(一)

一、linux内核结构框图 对内核结构框图有个总体的把握&#xff0c;有助于理解为什么驱动要这样写&#xff0c;为什么写的应用程序所用的C库接口能够产生这么多的事情。 框图可以看出来&#xff0c;linux系统&#xff0c;包括五个系统 一、Linux内核结构介绍 Linux 内核是操作…

Spring及相关框架的重要的问题

Java框架 问题一&#xff1a;Spring框架中的单例bean是线程安全的吗&#xff1f; 看下图&#xff0c;不能被修改的成员变量就是无状态的类&#xff0c;无状态的类没有线程安全问题&#xff0c;所以在开发中尽量避免可修改的成员变量。 回答&#xff1a;不是线程安全的&#xf…

Oracle一对多(一主多备)的DG环境如何进行switchover切换?

本文主要分享Oracle一对多(一主多备)的DG环境的switchover切换&#xff0c;如何进行主从切换&#xff0c;切换后怎么恢复正常同步&#xff1f; 1、环境说明 本文的环境为一主两备&#xff0c;数据库版本为11.2.0.4&#xff0c;主要信息如下&#xff1a; 数据库IPdb_unique_n…

Github 2024-08-09 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-08-09统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目6TypeScript项目4Jupyter Notebook项目1Cuda项目1Sentry:开发者优先的错误跟踪和性能监控平台 创建周期:5093 天开发语言:Python,…

android系统中data下的xml乱码无法查看问题剖析及解决方法

背景&#xff1a; Android12高版本以后系统生成的很多data路径下的xml都变成了二进制类型&#xff0c;根本没办法看xml的内容具体如下&#xff1a; 比如想要看当前系统的widget的相关数据 ./system/users/0/appwidgets.xml 以前老版本都是可以直接看的&#xff0c;这些syste…

旅游出行必备商城小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;新闻类型管理&#xff0c;新闻资讯管理&#xff0c;商品类型管理&#xff0c;旅游商品管理&#xff0c;旅游景点&#xff0c;景点分类&#xff0c;系统管理 微信端账号功能包括&am…

GitHub的常用操作

目录 GitHub GitHub加速 克隆GitHub上的项目到本地 克隆GitHub上指定分支的项目 把本地项目上传到GitHub上管理 删除分支里的内容 单个仓库管理多个项目 上传项目到新建的分支 目前正在逐步熟悉GitHub&#xff0c;打算把整理好的代码上传到GitHub上&#xff0c;建立属…

C++ 类与对象

面向对象程序设计基本特点 特点&#xff1a; 抽象&#xff08;数据抽象&#xff0c;行为抽象&#xff09; 数据抽象&#xff1a;int hour,int minute.....,车&#xff1a;长&#xff0c;宽&#xff0c;高.... 功能抽象&#xff1a;showTime(),setTime() .....车&#xff1a;刹车…

使用Cisco进行模拟配置OSPF路由协议

OSPF路由协议 1.实验目的 1&#xff09;理解OSPF 2&#xff09;掌握OSPF的配置方法 3&#xff09;掌握查看OSPF的相关信息 2.实验流程 开始 → 布置拓扑 → 配置IP地址 → 配置OSPF路由并验证PC路由的连通性 → 查看路由器路由信息 → 查看路由协议配置与统计信息 → 查看O…