当前位置：首页 > news >正文

路由之间是怎么跳转的？有哪些方式?

news 来源：原创 2025/6/26 23:55:00

1. React 路由跳转方式（React Router）

在 React 中，路由跳转通常使用 React Router 来管理。React Router 提供了不同的跳转方式。

<Link> 组件跳转 使用 <Link> 组件来进行路由跳转，它会渲染为一个 HTML <a> 标签，不会引起页面的刷新，而是通过路由机制实现视图切换。
```
import { Link } from 'react-router-dom';const MyComponent = () => {return (<div><Link to="/about">Go to About</Link></div>);
}
```

history.push() 跳转 使用 history.push() 来实现程序化路由跳转，通常在函数组件中结合 useHistory 钩子来使用。

import { useHistory } from 'react-router-dom';const MyComponent = () => {const history = useHistory();const navigate = () => {history.push('/about');}return (<div><button onClick={navigate}>Go to About</button></div>);
}

<Redirect /> 跳转 <Redirect /> 组件用来在渲染时自动进行路由跳转，常用于条件判断或权限控制等场景。

import { Redirect } from 'react-router-dom';const MyComponent = () => {const shouldRedirect = true;return shouldRedirect ? <Redirect to="/about" /> : <div>Home</div>;
}

2. Vue 路由跳转方式（Vue Router）

在 Vue 中，路由跳转通常使用 Vue Router。Vue Router 提供了几种跳转方式：

<router-link> 组件跳转 与 React 中的 <Link> 类似，Vue 使用 <router-link> 来实现声明式路由跳转。
```
<template><router-link to="/about">Go to About</router-link>
</template>
```

this.$router.push() 跳转 使用 this.$router.push() 实现程序化路由跳转，常见于方法或事件处理函数中。

<template><button @click="goToAbout">Go to About</button>
</template><script>
export default {methods: {goToAbout() {this.$router.push('/about');}}
}
</script>

this.$router.replace() 跳转 与 push 类似，但 replace 不会留下历史记录，所以无法使用浏览器的后退按钮返回到上一个页面。
```
this.$router.replace('/about');
```
编程式重定向（this.$router.replace()） 根据某些条件进行页面跳转。
```
if (userNotLoggedIn) {this.$router.replace('/login');
}
```

3. Angular 路由跳转（Angular Router）

在 Angular 中，路由跳转通常通过 Angular Router 来完成，主要有以下几种方式：

<routerLink> 指令跳转 与 React 和 Vue 类似，Angular 使用 <routerLink> 指令来实现声明式路由跳转。
```
<a routerLink="/about">Go to About</a>
```

this.router.navigate() 跳转 Angular 提供了编程式路由跳转的方法 navigate()，常常在组件的代码中使用。

import { Component } from '@angular/core';
import { Router } from '@angular/router';@Component({selector: 'app-home',templateUrl: './home.component.html'
})
export class HomeComponent {constructor(private router: Router) {}goToAbout() {this.router.navigate(['/about']);}
}

路由重定向 路由重定向可以通过在路由配置中进行设置来实现。例如：
```
const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' } ];
```

4. 原生 HTML 路由跳转

对于一些不使用框架的应用，或者需要跳转到其他页面的场景，可以使用原生 HTML 的方式进行路由跳转：

使用 <a> 标签跳转 使用标准的 HTML <a> 标签来进行跳转，这种方式会触发浏览器的页面刷新。
```
<a href="/about">Go to About</a>
```

window.location 跳转 使用 JavaScript 的 window.location 对象来进行页面跳转。

window.location.href = '/about'; // 或者 window.location.replace('/about');
window.location.href 会将新页面加入浏览器历史记录，而 window.location.replace() 不会，后者类似于 pushState。

5. 其他常见的路由跳转方式

history.pushState() 和 history.replaceState()

这些方法允许你修改浏览器的历史记录而不引起页面重载，适用于使用单页应用（SPA）框架或自己管理路由的场景。
```
history.pushState({ page: 'about' }, '', '/about');
pushState()：添加历史记录
replaceState()：替换当前历史记录
```

总结

路由跳转的方式主要分为声明式跳转和程序化跳转：

声明式跳转：通过 <Link>、<router-link> 或 <routerLink> 等标签实现，通常用于静态页面中的路由跳转。
程序化跳转：通过 history.push()、this.$router.push()、router.navigate() 等方法实现，通常用于事件处理、权限判断等动态场景。

不同框架和技术栈提供了不同的路由机制，但基本原理相同，都是通过修改浏览器的 URL 地址来切换视图

路由之间是怎么跳转的？有哪些方式?

1. React 路由跳转方式（React Router） 在 React 中，路由跳转通常使用 React Router 来管理。React Router 提供了不同的跳转方式。 <Link> 组件跳转使用 <Link> 组件来进行路由跳转，它会渲染为一个 HTML <a> …...

编程日记 2025/6/26 23:55:00

AudioSegment 将音频分割为指定长度时间片段 - python 实现

DataBall 助力快速掌握数据集的信息和使用方式，会员享有百种数据集，持续增加中。需要更多数据资源和技术解决方案，知识星球： “DataBall - X 数据球(free)” -------------------------------------------------------------…...

编程日记 2025/6/27 13:44:15

双目摄像头标定方法

打开matlab 找到这个标定将双目左右目拍的图像上传（左右目最好不少于20张） 等待即可此时已经完成标定，左下角为反投影误差，右边为外参可视化把这些误差大的删除即可。点击导出此时回到主页面，即可看到成功导出 Ca…...

编程日记 2025/6/27 10:21:19

题解 - 莱布尼茨三角形

题目描述世界上著名的莱布尼茨三角形如图所示，请编程输出图中排在第n行从左边数第m个位置上的数。输入共一行，有二个整数N 和M(N<15)，两数间用空格隔开。输出共一行，有二个整数，两数间用“/”隔开&#xff…...

编程日记 2025/6/26 19:19:49

低代码开发：企业数智化转型中的关键角色与实践案例分析

引言随着信息技术的飞速发展，企业数智化转型已成为提升竞争力和实现可持续发展的必经之路。在这一过程中，低代码开发平台作为一种新兴的开发模式，正逐渐成为企业数智化转型的关键角色。本文将探讨低代码开发在企业数智化转型中的作用&#x…...

编程日记 2025/6/27 2:10:52

【ubuntu24.04】PDFMathTranslate 本地PDF翻译GPU部署

https://huggingface.co/spaces/reycn/PDFMathTranslate-Docker排不上号官方都是要安装包，感觉可以本地试着源码部署一下， http://localhost:7860/官方是这个端口，但是我本地启动是：5000IDEA 里本地 backend启动效果 GUI 是监听7860的...

编程日记 2025/6/25 6:06:12

基于Spring Boot + Vue的摄影师分享交流社区的设计与实现

博主介绍：java高级开发，从事互联网行业六年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了多年的设计程序开发，开发过上千套设计程序，没有什么华丽的语言，只有实…...

编程日记 2025/6/25 5:49:06

高空坠物识别

目录一、回答二、其他参考 prompt 有没有识别高空坠物的github项目一、回答根据您的请求，以下是一些在GitHub上可以找到的关于识别高空坠物的项目： 1、overthecity 这是一个监控高空抛物的云端服务项目，它利用Edison的计算能力对高空抛物…...

编程日记 2025/6/24 12:21:14

22. 正则表达式

一、概述正则表达式（regular expression）又称规则表达式，是一种文本模式（pattern）。正则表达式使用一个字符串来描述、匹配具有相同规格的字符串，通常被用来检索、替换那些符合某个模式（规则&…...

编程日记 2025/6/26 3:39:29

阿里云数据库MongoDB版助力极致游戏高效开发

客户简介成立于2010年的厦门极致互动网络技术股份有限公司（以下简称“公司”或“极致游戏”），是一家集网络游戏产品研发与运营为一体的重点软件企业，公司专注于面向全球用户的网络游戏研发与运营。在整个产业链中，公…...

编程日记 2025/6/22 7:46:06

leetcode230.二叉搜索树中第k小的元素

标签：二叉搜索树；中序遍历给定一个二叉搜索树的根节点 root ，和一个整数 k ，请你设计一个算法查找其中第 k 小的元素（从 1 开始计数）。示例 1： 输入：root [3,1,4,null,2], k 1…...

编程日记 2025/6/25 14:45:31

深入了解C++中const的用法

文章目录一、C中的const如何理解？二、C中的const与C语言中的const有何区别？三、const与指针、引用的结合使用一、C中的const如何理解？ 在C中，const是一个关键字，用来表示常量性，意在告诉编译器某些变量或…...

编程日记 2025/6/26 5:38:10

adb连接逍遥安卓模拟器失败的问题解决方案

1、逍遥安卓模拟器进入系统应用，设置-关于平板电脑-版本号，连续点击3次以上，直到提示进入开发者模式，返回设置界面，进入【开发者选项】-【USB调试】开启，之后重启模拟器再次adb尝试连接。 2、android stud…...

编程日记 2025/6/27 11:27:52

【Go基础】Go算法常用函数整理

Go算法常用函数整理使用 Go 语言编写算法题时，掌握一些常用的函数和用法可以大大提高效率。 1. 排序 (slices 包)： slices.Sort(x []T)： 对切片 x 进行升序排序。需要 Go 1.18 版本。T 需要实现 constraints.Ordered 接口，例如…...

编程日记 2025/6/25 19:22:17

code . 打开vscode fn main() {println!("hello world!") }loop{}循环; break跳出循环 // 引入三方库 use rand::Rng; // 引入标准库中的输入输出 use std::cmp::Ordering; use std::io;// main函数先执行main函数 fn main() {// 打印的宏方法// 打印提示信息print…...

编程日记 2025/6/27 13:40:22

BFS算法题

目录 1.BFS 2.树里的宽搜题目一——429. N 叉树的层序遍历 - 力扣（LeetCode） 题目二——103. 二叉树的锯齿形层序遍历 - 力扣（LeetCode） 题目三——662. 二叉树最大宽度 - 力扣（LeetCode） 题目四——…...

编程日记 2025/6/25 8:31:57

辅助函数：mapMutations，mutations里的方法映射到组件的methods中

或者，页面已经映射了该方法 ，直接在该页面使用该方法。也就是不用在组件函数中向仓库传递修改数据信息，直接使用映射过来的方法修改数据修改标题跟在methods中定义函数不一样调用mutations方法修改标题不一样，新修改的数据是要写…...

编程日记 2025/6/27 13:49:31

XX服务器上的npm不知道咋突然坏了

收到同事的V，说是：182上的npm不知道咋突然坏了，查到这里了，不敢动了。咱一定要抓重点：突然坏了。这里的突然肯定不是瞬间（大概率是上次可用，这次不可用，中间间隔了多长时间&#x…...

编程日记 2025/6/25 17:48:55

2024年山西省第十八届职业院校技能大赛（高职组）“信息安全管理与评估”赛项规程

2024年山西省第十八届职业院校技能大赛 （高职组）“信息安全管理与评估”赛项规程一、赛项名称赛项名称：信息安全管理与评估英文名称：Information Security Management and Evaluation 赛项组别：高职教师组赛项归属…...

编程日记 2025/6/24 1:42:04

Excel拆分脚本

Excel拆分工作表按行拆分为工作薄工作表按行拆分为工作薄打开要拆分的Excel文件，使用快捷键（AltF11）打开脚本界面，选择要拆分的sheet，打开Module，在Module中输入脚本代码，然后运行脚本 Su…...

编程日记 2025/6/26 14:01:00

深入解析MySQL事务隔离级别与锁机制在银行账户业务中的应用

一、引言在金融行业，尤其是银行账户业务中，数据的一致性和安全性至关重要。MySQL作为一种广泛使用的数据库，其事务隔离级别和锁机制在保证数据一致性方面发挥着重要作用。本文将针对银行账户查询与转账业务，探讨如何运用事务锁来…...

编程日记 2025/5/31 14:41:10

Linux 设备树

学习设备树之前你需要知道什么？ 因为设备树描述了整个芯片和开发板等所有硬件信息内容，所以他的信息量是非常庞大的，RK的linux的设备树算下来大概就有九千多行，大家不要被这个数字给吓到，这些内容都是原厂工程师写的&a…...

编程日记 2025/6/24 22:48:25

Ollama管理本地开源大模型，用Open WebUI访问Ollama接口

现在开源大模型一个接一个的，而且各个都说自己的性能非常厉害，但是对于我们这些使用者，用起来就比较尴尬了。因为一个模型一个调用的方式，先得下载模型，下完模型，写加载代码，麻烦得很。对于程序的规范来说，只要东西一多，我们就需要一个集中管理的平台，如管理python…...

编程日记 2025/6/22 6:29:47

面向对象进阶：多态

黑马程序员Java个人笔记 BV17F411T7Ao p129~132 目录多态多态调用成员的特点调用成员变量调用成员方法理解多态的优势解耦合多态的弊端解决方案：强制类型转换 instanceof jdk14新特性，将判断和强转放一起总结多态多态调…...

编程日记 2025/6/23 15:46:22

设置IMX6ULL开发板的网卡IP的两种方法(临时生效和永久有效两种方法)

设置开发板网卡的IP，有两种方法。方法一：临时生效第一种方式是临时设置，只有本次有效，重启后又要重新设，命令为： ifconfig eth0 192.168.5.9设置成功后可以使用ifconfig命令来查看已设置的 IP 地址。 …...

编程日记 2025/6/26 15:41:42

Navicat for MySQL 查主键、表字段类型、索引

针对Navicat 版本11 ，不同版本查询方式可能不同 1、主键查询 （重点找DDL！！！） 方法（1） ：右键 - 对象信息 - 选择要查的表 - DDL - PRIMARY KEY 方法（2&…...

编程日记 2025/6/26 15:19:35

二十七、Tomcat专题总结与拓展

文章目录一、Tomcat设计思路总结1、Tomcat整体架构2、Tomcat设计思路二、Tomcat源码设计精髓三、拓展：SpringBoot整合Tomcat源码分析四、拓展：SpringBoot整合Undertow实战1、Undertow概述2、SpringBoot集成Undertow2.1、引入依赖2.2、application.prop…...

编程日记 2025/6/26 4:13:15

WPF+MVVM案例实战与特效（三十九）- 深度剖析一个弧形进度条的实现

文章目录 1、使用 Path 结合 ArcSegment 绘制圆弧1、属性解读2、静态圆弧3、动态圆弧4、运行效果5、圆弧两端点的形状2、总结1、使用 Path 结合 ArcSegment 绘制圆弧 1、属性解读 Path 是 WPF 中的一个标记元素，用于绘制复杂的几何路径形状，而 ArcSegment 用于描述 Path 中…...

编程日记 2025/6/26 2:55:51

Spring Boot 应用 “Connection is closed” 及 MySQL 空闲超时断开连接解决方案

在使用 Spring Boot MySQL HikariCP 的组合时，可能会在生产或测试环境中遭遇类似如下异常信息： org.springframework.jdbc.UncategorizedSQLException: PreparedStatementCallback; uncategorized SQLException for SQL [SELECT ...]; SQL state [nu…...

编程日记 2025/6/20 20:10:38

【数据库】Oracle

文章目录 1. 批量更新 1. 批量更新这种方式将所有更新操作放在一个事务中执行，减少了与数据库的交互次数，从而可能提高性能。此外，事务处理还可以确保数据的一致性和完整性。begin; update mytable set STATE 102,STATE_DATE now() …...

编程日记 2025/6/24 7:35:41

链式栈的实现及其应用

目录一、链式栈结构模型二、链式栈的实现 2.1创建 2.2压栈 2.3出栈 2.4判断栈是否为空 2.5查看栈顶 2.6释放栈三、应用链式栈实际上就是基于链表，压栈和弹栈可分别看作头插和头删，链表尾部就是栈底，头指针就是栈顶指针一、链式…...

编程日记 2025/5/30 2:59:40

结构化的Prompt

资源库： AI 提示词-WayToAGI精选高效的AI提示词库，助力创作者和开发者解锁人工智能的潜力。通过我们的提示词和策略，优化您的AI工具使用效率，激发创意思维，提升产出质量。https://www.waytoagi.com/prompts?tag6 结构…...

编程日记 2025/6/22 1:39:01

ChatGPT突然全球宕机，OpenAI致歉：并查明原因，正积极修复

ChatGPT突然全球宕机，OpenAI致歉：并查明原因，正积极修复在 2024 年 12 月 12 日上午的北京时间时段内，ChatGPT突发全球宕机，OpenAI致歉：已查明原因，正积极修复官方证实了其备受瞩目的聊天机器…...

编程日记 2025/6/23 1:32:24

【实验16】基于双向LSTM模型完成文本分类任务

目录 1 数据集处理- IMDB 电影评论数据集 1.1 认识数据集 1.2 数据加载 1.3 构造Dataset类 1.4 封装DataLoader 1.4.1 collate_fn函数 1.4.2 封装dataloader 2 模型构建 2.1 汇聚层算子 2.2 模型汇总 3 模型训练 4 模型评价 5 模型预测 6 完整代码 7 拓展实验 …...

编程日记 2025/6/26 5:09:59

【中工开发者】鸿蒙商城app

这学期我学习了鸿蒙，想用鸿蒙做一个鸿蒙商城app，来展示一下。项目环境搭建： 1.开发环境：DevEco Studio2.开发语言：ArkTS3.运行环境：Harmony NEXT base1 软件要求： DevEco Studio 5.0.0 Rel…...

编程日记 2025/6/27 5:54:16

SpringBoot 整合 MongoDB 实现文档存储

一、MongoDB 简介 MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是可以应用于各种规模的企业、各个行业以及各类应用程序的开源数据库。基于分布式文件存储的数据库。由C语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解…...

编程日记 2025/6/23 1:43:47

鲲鹏麒麟安装ElasticSearch7.8.0

因项目需求需要在鲲鹏麒麟服务器上安装ElasticSearch7.8.0，考虑Docker方式安装比较简单，因此使用Docker方式安装环境信息操作系统：Kylin Linux Advanced Server release V10 (Tercel) Docker：18.09.0 [rootserver ~]# uname …...

编程日记 2025/6/27 9:02:31

NDN命名数据网络和域名的区别

NDN（Named Data Networking）网络的概念 NDN是一种新型的网络架构，也被称为命名数据网络。与传统的以IP地址为中心的网络架构不同，NDN是以数据（内容）本身命名为中心的网络架构。在传统网络中，我们通过IP地址来寻找主机设备，然后获取该设备上存储的内容。而在NDN网络中，…...

编程日记 2025/6/26 23:11:20

PyTorch基本使用-自动微分模块

学习目的：掌握自动微分模块的使用训练神经网络时，最常用的算法就是反向传播。在该算法中，参数（模型权重）会根据损失函数关于对应参数的梯度进行调整。为了计算这些梯度，PyTorch 内置了名为 torch.autogra…...

编程日记 2025/6/26 1:09:34

关于linux kernel softlockup 的探究

1. 基本解释 softlockup：发生在某个 CPU 长时间占用资源，但 CPU 仍然可以响应中断和调度器。软死锁通常不会导致系统崩溃，但可能会使系统响应变慢. 2. 驱动模拟softlockup 以下为代码实现 #include <linux/module.h> #include <…...

编程日记 2025/6/25 8:02:07

MySQL 时区参数 time_zone 详解

文章目录前言1. 时区参数影响2. 如何设置3. 字段类型选择前言 MySQL 时区参数 time_zone 有什么用？修改它有什么影响？如何设置该参数，本篇文章会详细介绍。 1. 时区参数影响 time_zone 参数影响着 MySQL 系统函数还有字段的 DEFAULT CUR…...

编程日记 2025/6/22 7:00:34

【计算机网络层】数据链路层：局域网和交换机

🧸安清h：个人主页 🎥个人专栏：【计算机网络】【Mybatis篇】 🚦作者简介：一个有趣爱睡觉的intp，期待和更多人分享自己所学知识的真诚大学生。目录 🎯局域网 🚦局域网…...

编程日记 2025/6/22 7:00:58

WebSocket、Socket、TCP 与 HTTP：深入探讨与对比

随着互联网技术的快速发展，现代Web应用对于实时通信的需求越来越高。传统的HTTP协议由于其无状态和请求-响应模式的限制，在实现高效、低延迟的实时通信方面存在一定的局限性。为了解决这一问题，WebSocket协议应运而生，它提供了一种…...

编程日记 2025/6/27 2:16:13

【开源免费】基于SpringBoot+Vue.JS在线办公系统（JAVA毕业设计）

本文项目编号 T 001 ，文末自助获取源码 \color{red}{T001，文末自助获取源码} T001，文末自助获取源码目录一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析六、核心代码6.1 查…...

编程日记 2025/6/25 12:20:19

Vue指令

创建项目： vue init webpack 项目名称 element-ui npm i element-ui -saxios npm i axios1.1.3 -S vuex npm i vuex3.6.2 -S vuex持久化 npm i -S vuex-persistedstate4.1.0代理模版 proxyTable: {/api: {target: http://localhost:8081/,changeOrigin: true,pathRe…...

编程日记 2025/6/22 23:15:18

经典文献阅读之--ATI-CTLO(基于自适应时间间隔的连续时间Lidar-Only里程计)

0. 简介激光雷达扫描中的运动失真，由机器人的激烈运动和环境地形特征引起，显著影响了3D激光雷达里程计的定位和制图性能。现有的失真校正解决方案在计算复杂性和准确性之间难以平衡。《ATI-CTLO: Adaptive Temporal Interval-based Continuous-Time Li…...

编程日记 2025/6/25 5:22:26

【GitHub分享】you-get项目

【GitHub分享】you-get 一、介绍二、安装教程三、使用教程四、配置ffmpeg五，卸载如果大家想要更具体地操作可去开源网站查看手册，这里只是一些简单介绍，但是也够用一般，有什么问题，也可以留言。一、介绍 you-get是一…...

编程日记 2025/6/25 7:43:57

右玉200MW光伏电站项目微气象、安全警卫、视频监控系统

一、项目名称山西右玉200MW光伏电站项目微气象、安全警卫、视频监控系统二、项目背景： 山西右玉光伏发电项目位于右玉县境内，总装机容量为200MW，即太阳能电池阵列共由200个1MW多晶硅电池阵列子方阵组成，每个子方阵包含太阳能…...

编程日记 2025/6/26 4:41:27

box 提取

box 提取 import json import os import shutilimport cv2 import numpy as np import pypinyinclass Aaa():passdef pinyin(word):s for i in pypinyin.pinyin(word, stylepypinyin.NORMAL):s .join(i)return s if __name__ __main__:selfAaa()base_dirrE:\data\dao\20241…...

编程日记 2025/6/25 16:33:28

【合作原创】使用Termux搭建可以使用的生产力环境（六）

前言在上一篇【合作原创】使用Termux搭建可以使用的生产力环境（五）-CSDN博客我们讲到了如何美化xfce4桌面，达到类似于Windows的效果，这一篇将继续在上一篇桌面的基础上给我们的系统装上必要的软件，让它做到真正可以使…...

编程日记 2025/6/21 13:48:31

1. React 路由跳转方式（React Router）

2. Vue 路由跳转方式（Vue Router）

3. Angular 路由跳转（Angular Router）

4. 原生 HTML 路由跳转

5. 其他常见的路由跳转方式

总结

相关文章：