vue路由传参和react 路由传参

路由跳转的方式

1、声明式导航 <router-link to="导航的地址">

2、编程式导航

编程式导航有三种方法来进行导航

router.push router.replace router.go

params传参和query传参

1、 params 传参(不在URL中显示参数)

  • 在父路由跳转到子路由时,也可以通过params传递参数。

  • 参数不会显示在URL中,不能直接在URL中看到传递的参数。

  • 使用$router.push方法进行跳转,并在params对象中传递参数。

  • 在子路由中通过$route.params来获取传递的参数。

编程式
this.$router.push({name:'about', //组件名params: {id:'1'}  //传递的参数 {key:value,key:value}
})
声明式
//(对象 )写法:name:'组件名称; params:{参数名称:参数}  
<router-link :to="{name:'about',params:{name:'路由传参'}}">跳转传递参数
</router-link>
​

通过this.$route.params

缺点:不能直接在URL中看到传递的参数,刷新页面会造成传递的参数丢失

2、params传参 (显示参数)

  • 在父路由跳转到子路由时,可以通过params传递参数。

  • 参数会显示在URL中,可以直接在URL中看到传递的参数。

  • 在子路由中通过$route.params来获取传递的参数。

  • to是跳转的地址,params是传递的参数

这种字符串写法需要提前配置路由才能实现

{ 
path: "/about/:id", 
name: "about", 
component: () => import("../views/about/about.vue")},

(写法1):声明式 router-link

动态传参 <router-link :to="`/about/${id}`"></router-link>传固定值 <router-link :to="`/about/${id}`"></router-link>

(写法2):编程式 this.$router.push({ })

this.$router.push({path:`/about/${1}`, //模板字符串,动态传参写法//path:'/about/1'    //直接传固定值

可以在页面的URL地址中看到传递的参数,且刷新不会丢失

3、query方式传参

  • 在父路由跳转到子路由时,可以通过query传递参数。

  • 参数会显示在URL中,可以直接在URL中看到传递的参数。

  • 使用$router.push方法进行跳转,并在query对象中传递参数。

  • 在子路由中通过$route.query来获取传递的参数。

    声明式

<router-link :to="{path:'/about',query:{id:'query传参'}}">query传参
</router-link>

编程式

name 和 path 都能用。用 path 的时候,提供的 path 值必须是相对于根路径的相对路径,
//而不是相对于父路由的相对路径,否则无法成功访问。
this.$router.push({path:'/about',// name:'about',query:{id:1}
})

获取query参数

this.$route.query;

可以在页面的URL地址中看到传递的参数,刷新页面不会造成传递参数的丢失

react 传参方式

react router v6 获取传参需要用两个 hook,分别是 useParams(params)和 useSearchParams(search)

(1)useParams

params 传参

import { NavLink } from 'react-router-dom';
​
{/* 路由定义 /article/:id */}
<NavLink to={`/article/1`}>文章1</NavLink>

接收参数

import { useParams } from 'react-router-dom'
​
/* params */
const params = useParams();
const { id } = params;

(2)useSearchParams

search 传参

import { NavLink } from 'react-router-dom';
​
<NavLink to={`/article?id=1`}>文章1</NavLink>

接收参数

import { useSearchParams } from 'react-router-dom'
​
/* search */
let [searchParams, setSearchParams] = useSearchParams();
const { id } = searchParams;

(3)useLocation

state 传参

import { NavLink } from 'react-router-dom';
​
<NavLink to="/article" state={{ id: 1 }}>文章1</NavLink>

接收参数

import { useLocation } from 'react-router-dom'
​
let location = useLocation();
const { id } = location.state;

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

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

相关文章

【Django】网上蛋糕项目商城-热销和新品

概念 本文将完成实现项目的热销和新品两个分类的商品列表进行分页展示。 热销和新品功能实现步骤 在head.html头部页面中点击这两个超链接向服务器发送请求。 在urls.py文件中定义该请求地址 path(goodsrecommend_list/,views.goodsrecommend_list) 在views.py文件中定义g…

JDBC中的批处理是什么?如何使用?

JDBC中的批处理是指将多个关联的SQL语句组合成一个批处理&#xff0c;并将它们作为一个调用提交给数据库。这种方法可以减少通信的资源消耗&#xff0c;从而提高性能。以下是关于JDBC批处理的具体使用和步骤&#xff1a; 1. JDBC批处理的基本概念 批处理定义&#xff1a;将多…

英飞凌TC3xx之一起认识GTM(十五)GTM常见配置问题总结

英飞凌TC3xx之一起认识GTM(十五)GTM常见配置问题总结 1 关于TGC/AGC的配置注意事项2 关于HOST_TRIG的使用3 关于SOMC模式中MCS与ARU的合并使用配置4 深入理解SOMP模式中RST_CCU0的配置5 关于CCUx中断的使用6 TIM如何捕获ATOM的输出7 总结前面几篇关键文章信息链接汇总如下: …

AV Foundation学习笔记二 - 播放器

ASSets AVFoundation框架的最核心的类是AVAsset&#xff0c;该类是整个AVFoundation框架设计的中心。AVAsset是一个抽象的&#xff08;意味着你不能调用AVAsset的alloc或者new方法来创建一个AVAsset实例对象&#xff0c;而是通过该类的静态方法来创建实例对象&#xff09;、不…

DevOps CMDB平台整合Jira工单

背景 在DevOps CMDB平台建设的过程中&#xff0c;我们可以很容易的将业务应用所涉及的云资源&#xff08;WAF、K8S、虚拟机等&#xff09;、CICD工具链&#xff08;Jenkins、ArgoCD&#xff09;、监控、日志等一次性的维护到CMDB平台&#xff0c;但随着时间的推移&#xff0c;…

Stirling PDF 部署 - 强大的PDF Web在线编辑工具箱

简介 这是一个强大的、可本地托管的、基于 Web 的 PDF 操作工具&#xff0c;可使用 Docker部署。它使您能够对 PDF 文件执行各种操作&#xff0c;包括拆分、合并、转换、重组、添加图像、旋转、压缩等。这个本地托管的 Web 应用程序已经发展到包含一套全面的功能&#xff0c;可…

PHP爬虫类的并发与多线程处理技巧

PHP爬虫类的并发与多线程处理技巧 引言&#xff1a; 随着互联网的快速发展&#xff0c;大量的数据信息存储在各种网站上&#xff0c;获取这些数据已经成为很多业务场景下的需求。而爬虫作为一种自动化获取网络信息的工具&#xff0c;被广泛应用于数据采集、搜索引擎、舆情分析…

关于组织赴俄罗斯(莫斯科)第 28 届国际汽车零部件、汽车维修设备和商品展览会商务考察的通知

关于组织赴俄罗斯&#xff08;莫斯科&#xff09; 第 28 届国际汽车零部件、汽车维修设备和商品展览会商务考察的通知 展会名称&#xff1a;俄罗斯&#xff08;莫斯科&#xff09;第 28 届国际汽车零部件、汽车零部件、汽车维修设备和商品展览会 时间&#xff1a;2024 年 8 月…

Python | Leetcode Python题解之第204题计数质数

题目&#xff1a; 题解&#xff1a; MX5000000 is_prime [1] * MX is_prime[0]is_prime[1]0 for i in range(2, MX):if is_prime[i]:for j in range(i * i, MX, i):#循环每次增加iis_prime[j] 0 class Solution:def countPrimes(self, n: int) -> int:return sum(is_prim…

【MongoDB】分布式数据库入门级学习

SueWakeup 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;为祖国的科技进步添砖Java 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f8;友情提供 凯楠&#x1f4f8; - 不夜长安 目录 MongoDB 相关 数据库排行榜单 MongoDB 中文官网 菜鸟…

如何把mkv转成mp4?介绍一下将mkv转成MP4的几种方法

如何把mkv转成mp4&#xff1f;如果你有一个MKV格式的视频文件&#xff0c;但是需要将其转换为MP4格式以便更广泛地在各种设备和平台上播放和共享&#xff0c;你可以通过进行简单的文件格式转换来实现。转换MKV到MP4格式可以提供更好的兼容性&#xff0c;并确保你的视频文件能够…

在预训练语言模型主流架构

文章目录 编码器-解码器架构因果解码器架构前缀解码器架构在预训练语言模型时代,自然语言处理领域广泛采用了预训练 + 微调的范式,并诞生了以 BERT 为代表的编码器(Encoder-only)架构、以 GPT 为代表的解码器(Decoder-only)架构和以 T5 为代表的编码器-解码器(Encoder-d…

华为OD机试C卷(100分)-执行任务赚积分(c语言)

题目描述 现有N个任务需要处理&#xff0c;同一时间只能处理一个任务&#xff0c;处理每个任务所需要的时间固定为1。 每个任务都有最晚处理时间限制和积分值&#xff0c;在最晚处理时间点之前处理完成任务才可获得对应的积分奖励。 可用于处理任务的时间有限&#xff0c;请问…

AI学习指南机器学习篇-随机森林超参数选择与调优

AI学习指南机器学习篇-随机森林超参数选择与调优 随机森林是一种强大的机器学习算法&#xff0c;它能够处理复杂的数据集&#xff0c;并且对于大部分实际问题都表现出色。然而&#xff0c;要充分发挥随机森林的性能&#xff0c;需要对其超参数进行合理选择和调优。本文将介绍随…

React:tabs或标签页自定义右击菜单内容,支持内嵌iframe关闭菜单方案

React&#xff1a;tabs或标签页自定义右击菜单内容&#xff0c;支持内嵌iframe关闭菜单方案 不管是react、vue还是原生js&#xff0c;原理是一样的。 注意如果内嵌iframe情况下&#xff0c;iframe无法使用事件监听&#xff0c;但是可以使用iframe的任何点击行为都会往父级wind…

入门Java爬虫:认识其基本概念和应用方法

Java爬虫初探&#xff1a;了解它的基本概念与用途&#xff0c;需要具体代码示例 随着互联网的快速发展&#xff0c;获取并处理大量的数据成为企业和个人不可或缺的一项任务。而爬虫&#xff08;Web Scraping&#xff09;作为一种自动化的数据获取方法&#xff0c;不仅能够快速…

Pegasus平台Pytorch源码编译

和Drive PX2的编译没有什么区别 源码编译步骤 注意&#xff1a;当完全按照以下步骤进行编译时&#xff0c;如果出现错误&#xff0c;注意检查CUDA版本、对应的库是否存在 # Download PyTorch sources git clone --recursive --branch <version> http://github.com/pyt…

vtk渲染过程

vtk渲染 VTK的渲染过程主要包括创建渲染器、添加演员到渲染器、创建渲染窗口、创建交互器、将渲染器添加到渲染窗口中、将交互器与渲染窗口关联、启动交互器循环等步骤。12 创建渲染器(Renderer): 首先&#xff0c;需要创建一个或多个渲染器。渲染器是VTK中的一个重要组件&am…

在Ubuntu 16.04上安装和配置Elasticsearch的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 Elasticsearch 是一个用于实时分布式搜索和数据分析的平台。它因易用性、强大功能和可扩展性而备受欢迎。 Elasticsearch 支持 R…

vue2(vue-cli3x[vue.config.js])使用cesium新版(1.117.0)配置过程

看来很多解决方法都没有办法&#xff0c;最后终于。呜呜呜呜 这里我用的是vue-cli去搭建的项目的vue2 项目&#xff0c;其实不建议用vue2搭配cesium。因为目前cesium停止了对vue2的版本更新&#xff0c;现在默认安装都是vue3版本&#xff0c;因此需要控制版本&#xff0c;否则…