vue-router传参

╰+哭是因爲堅強的太久メ 2021-07-25 22:25 442阅读 0赞

1.vue-router传参

extraButtons: [
      { 
        type: "success",
        text: "查看",
        atClick(row) { 
          console.log(row);    },
      },
    ],

在父组件点击查看按钮传递参数给子组件

方法1：直接传参

// atClick(row)+
    this.$router.push({            
        path: `/info/${ id}`        
    })；
    
    // router
    // 需要在path中添加/:id来对应 $router.push 中path携带的参数。
    {       
        path: '/info/:id',      
        name: 'info',      
        component: Info    
    }
    
    // 子组件中: 这样来获取参数
    this.$route.params.id

方法2：使用path来匹配路由，然后通过query来传递参数

// atClick(row)+
    this.$router.push({ 
        path: "/info",
        query: { 
          id: row.id,
        },
    });
    
    // router
    // 这种情况下 query传递的参数会显示id=？
    { 
        path: "/info",
        name: "info",
        component: Info
    }
    
    // 子组件中: 这样来获取参数
    this.$route.params.id

方法3：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

// atClick(row)+
    this.$router.push({ 
      name: 'info',
      params: { 
        id: id
      }
    })；
    
    // router
    // 对应路由配置: 这里可以添加:/id 也可以不添加，添加会在url后面显示，不添加不显示
    { 
        path: "/info",
        name: "info",
        component: Info
    }
    
    // 子组件中: 这样来获取参数
    this.$route.params.id

发表评论取消回复

表情：

评论列表（有 0 条评论，442人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 127 阅读

相关 C++ | 引用传参，如何传参

前言 > 在定义函数时函数括号中的变量名成为`形式参数`，简称`形参或虚拟参数`；在主调函数中调用一个函数时，该函数括号中的参数名称为`实际参数`，简称实参，实参可以是`

- 日理万妓/ 2022年09月12日 03:50/ 0 赞/ 385 阅读

相关传参操作

void Swap1(int a, int b) { int temp; temp = a;

浅浅的花香味﹌/ 2022年08月04日 01:47/ 0 赞/ 264 阅读

相关游标传参

declare -- 定义变量 row_info varchar2(200); -- 定义游标,并指定参数类型

Myth丶恋晨/ 2022年07月26日 05:19/ 0 赞/ 291 阅读

相关 ionic 传参

.state('prepareRegister', { url: '/prepare_register', params:{ 'po

野性酷女/ 2022年07月14日 14:27/ 0 赞/ 252 阅读

相关 vuex 传参

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

ゝ一纸荒年。/ 2022年03月28日 14:42/ 0 赞/ 437 阅读

相关 C++引用方式传参，传值方式传参（*、&）

C++引用方式传参，传值方式传参（\、&）和数组作为参数传递 1、引用方式传参 2、传值方式传参

「爱情、让人受尽委屈。」/ 2022年02月22日 15:04/ 0 赞/ 481 阅读

相关传参问题

前几天通过action?begin=2013-11-27方式传参，结合struts，结果到action中获得的参数变成了'2013-11-27,2013-11-27'，太奇怪了

迈不过友情╰/ 2022年01月17日 02:39/ 0 赞/ 414 阅读

相关 vue传参之params传参query传参

vue编程式导航，在这里我们必须要明白一个知识点，就是params和query传参的用法。 params传参，路径不能使用path，只能使用name，不然取

我就是我/ 2021年09月16日 02:42/ 0 赞/ 662 阅读

相关 rn 路由传参、navigation传参

路由传参: (1)传参数 (1)发送函数式传递 function xx({navigation

傷城~/ 2021年07月24日 16:57/ 0 赞/ 1363 阅读