对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=查询条件二

即可查看结果