對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=查詢條件二

即可查看結果