vue router进行路由跳转并携带参数(params/query)

2023-10-27

在使用`router.push`进行路由跳转到另一个组件时,可以通过`params`或`query`来传递参数。


1. 使用`params`传参:
 

// 在路由跳转时传递参数
router.push({
name: 'targetComponent',
params: {
  paramName: paramValue  // 参数名和值
}
});

// 在目标组件中通过$route.params获取参数值
this.$route.params.paramName


2. 使用`query`传参:
 

// 在路由跳转时传递参数
router.push({
name: 'targetComponent',
query: {
  paramName: paramValue  // 参数名和值
}
});

// 在目标组件中通过$route.query获取参数值
this.$route.query.paramName


需要注意的是,`params`传参会将参数添加到URL路径中,而`query`传参则会将参数添加到URL的查询字符串中。根据具体需求选择适合的方式进行参数传递。

二者的区别:

`params`和`query`是Vue Router中用于传递参数的两种方式,它们有以下区别:
1. URL形式:
   - `params`传参:参数会以占位符的形式添加到URL路径中,例如:`/targetComponent/:paramName`
   - `query`传参:参数会以键值对的形式添加到URL的查询字符串中,例如:`/targetComponent?paramName=paramValue`
2. 参数的可见性:
   - `params`传参:参数会在URL中暴露,可以被查看和修改,适合传递敏感数据。
   - `query`传参:参数在URL中不直接暴露,不会修改URL路径,适合传递非敏感数据。
3. 参数的传递方式:
   - `params`传参:参数通过路由的`params`属性进行传递,传递的参数是一个对象。
   - `query`传参:参数通过路由的`query`属性进行传递,传递的参数是一个键值对的对象。
4. 路由配置:
   - `params`传参:需要在路由配置中定义参数的名称,以冒号开头,例如:`path: '/targetComponent/:paramName'`
   - `query`传参:不需要在路由配置中定义参数,可以直接使用。
需要根据具体的需求选择适合的方式进行参数传递。如果参数需要在URL中暴露或需要保留在浏览器的历史记录中,可以使用`params`传参;如果参数是一些临时的、非敏感的数据,可以使用`query`传参。

注意:如上方举例,如果paramValue是一个对象,跳转完页面后,如果进行页面刷新,会发现取到的值变成了[object Object]

可以在传递参数时先JSON.stringify,取值时JSON.parse解析

举例:

// 传递时
this.$router.push({
    path: "/screen/project",
    query: {
    paramName: JSON.stringify(this.paramValue)
    }
});

// 接收时
JSON.parse(this.$route.query.paramName);

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue router进行路由跳转并携带参数(params/query) 的相关文章

随机推荐

  • 【华为OD机试真题 C语言】48、 寻找身高相近的小朋友

    文章目录 一 题目 题目描述 输入输出 样例1 二 思路参考 三 代码参考 作者 鲨鱼狼臧 个人博客首页 鲨鱼狼臧 专栏介绍 2023华为OD机试真题 使用C语言进行解答 专栏每篇文章都包括真题 思路参考 代码分析 订阅有问题后续可与博主解
  • 基于深度学习实现以图搜图功能

    前记 深度学习的发展使得在此之前以机器学习为主流算法的相关实现变得简单 而且准确率更高 效果更好 在图像检索这一块儿 目前有谷歌的以图搜图 百度的以图搜图 而百度以图搜图的关键技术叫做 感知哈希算法 这是一个很简单且快速的算法 其原理在于针
  • 滚蛋吧,正则表达式!

    大家好 我是良许 不知道大家有没有被正则表达式支配过的恐惧 看着一行火星文一样的表达式 虽然每一个字符都认识 但放在一起直接就让人蒙圈了 你是不是也有这样的操作 比如你需要使用 电子邮箱正则表达式 首先想到的就是直接百度上搜索一个 然后采用
  • 数据名称:中国家庭追踪调查(CFPS)数据区县码数据描述:162个区县代码,适用于10-20年份,可匹配约85-90%的样本。可依次匹配coutyid-区县行政码code-地级市行政码city-省份

    数据名称 中国家庭追踪调查 CFPS 数据区县码 数据描述 162个区县代码 适用于10 20年份 可匹配约85 90 的样本 可依次匹配coutyid 区县行政码code 地级市行政码city 省份行政码province 从而进行市或县层
  • JAVA线程究竟有几种状态?

    线程状态 线程的状态 在你 度的过程中 你会发现 答案有5种 6种 甚至还有7种的 那么究竟有几种状态 准确答案就是6种 在编译器JDK1 5以后的环境下 打开Thread进入源码看看 A thread state A thread can
  • 关于python类说法正确的是_关于Python的说法正确的是

    判断题 1 5压强是大量分子对器壁碰撞的结果 具有统计意义 单选题 1 10 在常温下有1mol的氢气和1mol的氦气各一瓶 若将它们升高相同的温度 则 单选题 1 8 单选题 2 8 一容积不变的容器内充有一定量的某种理想气体 将该理想气
  • c++中struct构造函数

    构造函数 说白了 就是初始化 具体的打法是这个样子的 struct node 构造函数 node 形参表 内容 例子 struct node node int c x c y z 0 int x y z 当然 他既然作为一个函数 那么在里面
  • Leetcode 11. Container With Most Water

    如何盛最大的水 数组代表高度 盛的水量V min height left height right 底部的长度 right left 双指针解决这个问题 从左边 右边不断逼近 逐渐取得最大值 如何进行更新 不断进行更新逼近 因为决定的是he
  • portainer使用二进制文件安装

    一 安装portainer 1 1 查看portainer版本信息 版本信息 可在此查看到每个版本的详细信息 1 2 下载文件 下载并将二进制文件 root localhost opt wget https github com porta
  • c语言 code space memory overlap,编程时Keil中常见的错误

    If px pc c warning 259 ERROR 260 pointer truncation 指针转换时部分偏移量被截断 此时指针常量 如char xdata 转为一个具有较小偏移区的 指针 如char idata ERROR 2
  • uniapp的两个跳转方式

    uniapp内置多种跳转方式 我这里介绍两个最常用的跳转 uni navigateTo和uni switchTab 前者为跳转到非TabBar页面 后者为跳转到TabBar页面 所谓TabBar就是底部导航栏配置的页面 例如下方的index
  • STM32HAL库-移植Unity针对微控制器编写测试框架

    概述 本篇文章介绍如何使用STM32HAL库 移植Unity 是一个为C语言构建的单元测试框架 侧重于使用嵌入式工具链 GitHub https github com ThrowTheSwitch Unity 硬件 STM32F103CBT
  • 【Hello Algorithm】堆和堆排序

    本篇博客简介 讲解堆和堆排序相关算法 堆和堆排序 堆 堆的概念 堆的性质 堆的表示形式 堆的增加 删除堆的最大值 堆排序 堆排序思路 时间复杂度为N的建堆方法 已知一个近乎有序的数组 使用最佳排序方法排序 堆 堆的概念 这里注意 这里说的堆
  • python爬虫可视化web展示_基于Python爬虫的职位信息数据分析和可视化系统实现

    1 引言 在这个新时代 人们根据现有的职位信息数据分析系统得到的职位信息越来越碎片化 面对收集到的大量的职位信息数据难以迅速地筛选出对自己最有帮助的职位信息 又或者筛选出信息后不能直观地看到数据的特征 一般规律 变化的趋势或者数据之间潜在联
  • 【CSS】css的background属性用法详解,background常用缩写形式

    background是一个简写属性 可以在一个声明中设置背景颜色 背景位置 背景大小 背景平铺方式 背景图片等样式 语法background 颜色 图片 位置 大小 平铺方式 bg origin 绘制区域 bg attachment bac
  • 区块链开源项目

    bitcoin stars gt 100 forks gt 50 bitcoin OR wallet stars gt 100 forks gt 50 in file extension md 我们使用github的搜索功能 并选择fork
  • jmeter版本不支持的 jdk版本 解决办法

    在win7上安装了apache jmeter 2 11和jdk1 8 0 20 配置成功后 点击jmeter bat报错 截图如下 在网上搜索说是要注释掉set DUMP XX HeapDumpOnOutOfMemoryError 可是注释
  • 为什么你的pycharm打开时很卡,今天来教你解决方案

    相信很多刚开始使用pycharm不太熟练的小伙伴 每天一开机打开pycharm总是卡半天 不知道的还以为是电脑卡了或者啥问题的 莫慌 其实并不是 今天我们就来解决一下这个问题 大致总结了以下这几种方法 1 exclude不必要文件 依次打开
  • Redis使用总结(四、处理延时任务)

    引言 在开发中 往往会遇到一些关于延时任务的需求 例如 生成订单30分钟未支付 则自动取消 生成订单60秒后 给用户发短信 对上述的任务 我们给一个专业的名字来形容 那就是延时任务 那么这里就会产生一个问题 这个延时任务和定时任务的区别究竟
  • vue router进行路由跳转并携带参数(params/query)

    在使用 router push 进行路由跳转到另一个组件时 可以通过 params 或 query 来传递参数 1 使用 params 传参 在路由跳转时传递参数 router push name targetComponent param