对vue-router官网上面路由组件传参章节中三种模式的试验

vue-router官网中关于路由组件传参的三种模式:布尔模式 对象模式 函数模式,光看官网的描述还是很难理解,自己动手写了一下,大致是这样的。

先自定义一个组件,如下:

<template>
    <div>
        <div>传递过来的路径中的参数是name = {{name}}, id = {{id}}</div>
        <div>传递过来的查询参数是query1 = {{query1}}, query2 = {{query2}}</div>
    </div>
</template>

<script>
    export default {
        props: ['name', 'id', 'query1', 'query2'],
    }
</script>

 

然后路由配置的js文件里面

{
        path: '/my-component8/:name/:id', //此处传递的name和id参数,组件中也必须叫这个名字
        component: MyComponent8,
        //props: true //第一种写法,布尔模式

        //第二种写法,对象模式,这里传的是什么,组件上面接收的就会是什么
        /*props: {
            name: 'zhangsan',
            id: 999
        }*/

        //第三种写法,函数模式
        props: (route)=>({
            name: route.params.name,
            id: route.params.id,
            query1: route.query.query1,
            query2: route.query.query2
        })
    }

 

在网页上,输入http://localhost:8080/my-component8/zhangsanfeng/9999?query1=查询条件1&query2=查询条件二

即可查看结果

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值