在vue中如何使用路由参数传递

这篇文章主要给大家介绍了关于vue中路由参数传递遇到的坑的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

前言

vue中路由跳转传参数有多种,自己常用的是下面的几种

通过router-link进行跳转

通过编程导航进行路由跳转

立即学习“前端免费学习笔记(深入)”;

本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

首先我的路由的定义

{ path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve)}

登录后复制

我从A组件跳转到B组件,并通过路由信息对象传递一些参数

this.$router.push({ path: '/b', params: {  paramA: 'a'  }, query:{  paramB: 'b' }})

登录后复制

在B组件中获取参数

this.$route.query.paramB  //bthis.$route.params.paramA //undefined

登录后复制

通过路由的params对象传递过来的参数paramB始终是undefined,始终找不到原因。通过查阅资料,终于找到原因,那是因为路由的params对象使用,必须要通过路由名来调用路由,而不同通过path来调用,而query对象则没有这个要求。

所以我们修改下代码:

this.$router.push({ name: 'B', params: {  paramA: 'a'  }, query:{  paramB: 'b' }})

登录后复制

将path参数换成对应的路由名称就可以了,这个时候获取参数就一切正常了。

this.$route.query.paramB  //bthis.$route.params.paramA //a

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在微信小程序中如何使用audio组件

在微信小程序中如何使用audio组件

在微信小程序中如何使用audio组件

在微信小程序中如何使用audio组件

以上就是在vue中如何使用路由参数传递的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2749551.html

(0)
上一篇 2025年3月8日 05:02:51
下一篇 2025年3月8日 02:10:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在Vue中如何控制全局console.log开关

    这篇文章主要给大家介绍了关于vue根据url传参如何控制全局console.log开关的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 前言 最近在学习vue,发现了一个…

    编程技术 2025年3月8日
    200
  • 使用Vue如何制作组织架构树组件

    最近公司在做一个基于vue开发的项目,项目需要开发一个展示组织架构的树组件,在网上搜了半天,没有找到合适的,下面小编给大家分享一个基于vue制作组织架构树组件,需要的朋友参考下吧 由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项…

    2025年3月8日 编程技术
    200
  • 使用vue如何制作Tab组件

    这篇文章主要给大家介绍了关于利用vue组件自定义v-model实现一个tab组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 前言 最近在学习vue,今天…

    2025年3月8日
    200
  • 如何重置vue打印变量的显示方式(详细教程)

    这篇文章主要给大家介绍了关于如何重置vue打印变量显示方式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。 前言 我们在日常开发中,经常会碰到vue使用conso…

    2025年3月8日
    200
  • 在vue中有关cli使用绝对路径引用问题

    这篇文章主要给大家介绍了关于vue cli使用绝对路径引用图片问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。 前言 Vue是什么,是一套构建用户界面的渐进式…

    编程技术 2025年3月8日
    200
  • 在vue中如何实现picker效果

    这篇文章主要介绍了vue 实现 ios 原生picker 效果及实现思路解析,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 以前最早实现了一个类似的时间选择插件,但是适用范围太窄,索性最近要把这个实现方式发布出来,就重写…

    2025年3月8日 编程技术
    200
  • 在Vue中有关DevTools调试工具的使用方法

    本篇文章主要介绍了vue devtools调试工具的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 因为工作要求,目前主要在用Vue.js技术栈做开发,调试是必不可少的,这里会用的Vue DevTools的…

    2025年3月8日 编程技术
    200
  • 如何解决把Vue项目部署到服务器上出现的问题

    本篇文章主要介绍了vue 项目部署到服务器的问题解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环…

    2025年3月8日
    200
  • 在vue中有关计算属性如何使用

    本篇文章主要介绍了vue计算属性的使用和vue实例的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 本文介绍了vue计算属性的使用和vue实例的方法示例,分享给大家,具体如下: 计算属性 在模板中表达式…

    编程技术 2025年3月8日
    200
  • 在Vue中如何导出json数据到Excel电子表格

    本篇主要介绍了vue导出json数据到excel电子表格的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 网上看了很多文档感觉都不全,这里写一篇完整的详细教程。 一、安装依赖(前面基本一样) npm ins…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论