首页 > 其他分享 >vue路由传参接收以及传参对象为对象时的问题及解决--router

vue路由传参接收以及传参对象为对象时的问题及解决--router

时间:2024-09-04 17:03:06浏览次数:8  
标签:传参 vue -- route params push router 路由

场景:
<div @click='toDetail'>查看详情</div>

路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象


const router = useRouter()
const toDetail = () => {
    // 我使用的是Vue3,router要从useRouter获取
    router.push({ name: 'viewAttendPerson', params: { list: JSON.stringify(formObj.form.myMeetingParticipatorList) } })
}

接收路由参数:

  1. Vue3接收
import { useRoute } from "vue-router";
setup() {
    const route = useRoute()
    const data = JSON.parse(route.params.list)
}
  1. Vue2接收
let data = this.$route.params.list
data = JSON.parse(data)

Vue路由传参

1.route-link路由导航

在to跳转链接后传递参数,获取时需要在路由配置path时注明,才能通过$route.params拿到

<router-link to="/a/123">routerlink传参</router-link>
 
// 跳转后拿到参数
mounted () {
  this.num = this.$route.params.num
}
 
 
//num是在配置路由路径时定义好的
 
{path: '/a/:num', name: A, component: A}

2.$router.push

push跳转时在函数内定义好携带过去的参数,在下个页面通过$route.params拿到

<button @click="deliverParams(123)">push传参</button>
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }
 
//拿到参数
mounted () {
  this.id = this.$route.params.id
}
 
//路由配置
{path: '/d/:id', name: D, component: D}

3.通过路由属性中的name匹配路由,再根据params传递参数

//写好要push去到的组件名
 
<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: 'B',
        params: {
          sometext: '一只羊出没'
        }
      })
    }
 
//跳转后params拿到数据
<template>
  <div id="b">
    This is page B!
    <p>传入参数:{{this.$route.params.sometext}}</p>
  </div>
</template>
 
//路由规则定义
{path: '/b', name: 'B', component: B}

4.通过query来传递参数

//定义路由事件
<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: '/c',
        query: {
          sometext: '这是小羊同学'
        }
      })
    }
 
//跳转后拿到数据
<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
  </div>
</template>
 
//路由配置 无需做任何额外配置
{path: '/c', name: 'C', component: C}

注:通过这种方式拿到的数据会显示在url中

标签:传参,vue,--,route,params,push,router,路由
From: https://www.cnblogs.com/baozhengrui/p/18396897

相关文章

  • 如何判断网站流量暴增是否是恶意攻击导致的
    当网站流量暴增时,判断是否是恶意攻击导致的至关重要,因为这直接影响到采取的应对措施。以下是一些方法和步骤来判定流量暴增是否由恶意攻击引起:1.流量分析流量模式:检查流量是否呈异常模式,例如流量在非常短的时间内急剧上升。访问来源:分析访问IP地址的来源地,如果大量流量来自同一地......
  • windows系统重启桌面
    1.桌面卡死2.打开任务管理器Ctrl+Shift+Esc-->详细信息-->explorer.exe3.把explorer.exe任务结束掉4.点击文件-->新运行任务5.桌面已重启:......
  • 抑郁症困扰?香港团队利用AI并通过观察你的眼睛来帮助你
    在今年七月召开的中国共产党第三次全体会议上,国家确定了经济政策的长期方向,并将人工智能和生物医药等战略性行业列为重点目标。传统企业也将被鼓励通过技术实现转型。《南华早报》探讨了香港新兴科学家们的创新成果,这些科学家们已经在崭露头角,甚至可能成为像大疆和商汤这样的科......
  • 【Python篇】详细学习 pandas 和 xlrd:从零开始
    文章目录详细学习`pandas`和`xlrd`:从零开始前言一、环境准备和安装1.1安装`pandas`和`xlrd`1.2验证安装二、`pandas`和`xlrd`的基础概念2.1什么是`pandas`?2.2什么是`xlrd`?三、使用`pandas`读取Excel文件3.1读取Excel文件的基础方法代码示例:读取......
  • (5-4-05)基于Stable Diffusion的文生图系统:(5)概率分布+编码和嵌入
    5.概率分布文件distributions.py定义了与概率分布相关的抽象类和具体实现,包括抽象分布类AbstractDistribution、狄拉克分布DiracDistribution和对角高斯分布DiagonalGaussianDistribution。这些类提供了样本生成、模式计算和KL散度等功能,支持概率模型中的采样和分布计......
  • 第121期 CrowdHuman密集行人数据集
    引言亲爱的读者们,您是否在寻找某个特定的数据集,用于研究或项目实践?欢迎您在评论区留言,或者通过公众号私信告诉我,您想要的数据集的类型主题。小编会竭尽全力为您寻找,并在找到后第一时间与您分享。一、背景在人工智能与计算机视觉领域,人群场景下的目标检测一直是一个具有挑战性的......
  • 第122期 UCF50动作识别数据集
    引言亲爱的读者们,您是否在寻找某个特定的数据集,用于研究或项目实践?欢迎您在评论区留言,或者通过公众号私信告诉我,您想要的数据集的类型主题。小编会竭尽全力为您寻找,并在找到后第一时间与您分享。一、背景在人工智能和计算机视觉领域,动作识别一直是研究的热点之一。为了推动这一......
  • 利用生成式AI从无序数据中获取洞见
    使用生成式AI分析混乱数据的最佳实践检查表本文分享了一些我们公司使用生成式AI分析数据以更有效地进行运营的一些最佳实践。虽然花了一些时间,但我终于获得了Salesforce的市场、法律、安全和公关团队的批准,得以发表这篇文章。希望这能帮助你加速数据分析。本文中的所有图表都......
  • Comsol 三维结构声子晶体禁带及其传输特性
    1.带隙结构:声子晶体的带隙结构描述了声子在材料中传播的允许和禁止频率范围。它以色散关系的形式表示,显示了声子频率与晶体中的波矢之间的关系。2.声子禁带:声子禁带是带隙结构中的一个频率范围,在这个范围内声子被禁止在晶体中传播。它是由于晶体结构的周期性排列导致的声......
  • 香港服务器网站国内访问被受阻的原因
    香港服务器网站国内访问被受阻可能是由多种因素引起的,以下是一些常见的原因:1.网络线路问题国际出口拥堵:国内访问香港服务器需要通过国际出口,如果出口带宽拥堵,尤其是在高峰时段,会导致访问速度变慢或无法访问。线路故障:若本地电信或网络运营商的线路出现故障,也会影响国内用户对香港......