vue $router传参，地址栏传参

最新推荐文章于 2025-05-20 09:55:12 发布

zhangzuruiqqq

最新推荐文章于 2025-05-20 09:55:12 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/zhangzuruiqqq/article/details/116525498

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Vue中通过router进行路由跳转时，如何使用query和params两种参数类型，分别展示了如何在地址栏显示和隐藏参数，并在相关组件间传递数据。重点讲解了在二级路由配置中的应用和接收方法。

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

两种方式
1query 传参参数会在地址栏上显示
2 params 传参参数不会显示在地址栏上

注意！！！params 在路径跳转时只支持name 两种方式不能同时使用（写在一起）

@router/index.js
配置路由（我这里是二级路由，这种传参方式没有限制哈！随意传）

{
        path: '//only',
        component: Only,
        children: [
          // 基础信息
          { path: '//only/basics0', component: Basics0, name: 'Basics0' },
          // 仓储信息
          { path: '//only/storage1', component: Storage1 },
          // 报关信息
          { path: '//only/customs2', component: Customs2 },
          // 电商信息
          { path: '//only/commerce3', component: Commerce3 }
        ]
      }

（1）query传参
@only/index.vue 传参是router 这种方式支持name和path路径

this.$router.push({ // 核心语句
		// name: 'Basics0',
        path: '//only/basics0', // 跳转的路径
        query: { // 路由传参时push和query搭配使用 ，作用时传递参数
          employeeId: this.employeeId
        }
      })

@baseics0/index.vue 接收是route 注意接收时少了一个r！！

created () {
    this.employeeId = this.$route.query.employeeId
    console.log(this.employeeId)
  },

在这里插入图片描述

地址栏传参完成
（2）params 传参
@only/index.vue 传参是router 这种方式只支持name 不支持路径

this.$router.push({ // 核心语句
        name: 'Basics0',
        params: {
          page: '444444', code: ID
        }
      })

@baseics0/index.vue 接收是route 注意接收时少了一个r！！

created () {
    console.log(this.$route.params.page)
    console.log(this.$route.params.code)
  },

params 传参完成这种方式不会在地址栏显示参数