VueJs—路由传参（Router）

最新推荐文章于 2024-12-12 17:17:57 发布

yaoxiaoxu

最新推荐文章于 2024-12-12 17:17:57 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏： vueJs 文章标签： vuejs_router

本文链接：https://blog.youkuaiyun.com/yao_1996/article/details/83411603

vueJs 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue.js中两种常见的路由传参方式：使用query和params。通过具体示例，讲解了如何在组件间通过这两种方式传递参数，并在目标组件中如何获取这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuejs-router传参方式

1.使用query传参
2.使用params

1.使用query传参

使用query传递参数时，在地址栏可以看到参数≈get方式传输

this.$router.push({
        path:'/XXX' 
        query:{
          name:'yaoxx' 
        }
      })
/XXX中接收参数代码:
this.$route.query.name;  //ps：传参用$router,但是接收用$route

2.使用params

貌似params是使用配置文件中的【name】而非【path】跳转，所以注意别写错

this.$router.push({
        name:'XXX'  //配置文件中的name
        params:{
          name:'yaoxx' 
        }
      })
/XXX中接收参数代码:
this.$route.params.name;  //ps：传参用$router,但是接收用$route