[JavaScript知识库]Vue路由传参

query参数

不打扰路由配置

传递（携带）参数

<!-- 跳转并携带query参数，to的字符串写法，记得加: -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>

<!-- 跳转并携带query参数，to的对象写法，记得加: -->
<router-link 
    :to="{
        path:'/home/message/detail',
        query:{
            id:m.id,
            title:m.title
        }
    }">
    {{m.title}}
</router-link>

接收（读取）参数

$route.query.id
$route.query.title

命名路由

路由切换路径过长时，简化路由跳转

给路由命名：

export default new VueRouter({
    routes:[
        //路由规则
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            // 给路径配置name属性进行命名
                            name:'detail',
                            path:'detail',
                            component:Detail
                        },
                    ]
                }
            ]
        }
    ]
})

简化跳转（对象写法下才可以使用）：

<!-- 简化前，需要写很长的路径 -->
<router-link 
    :to="{
        path:'/home/message/detail',
        query:{
            id:m.id,
            title:m.title
        }
    }">
    {{m.title}}
</router-link>
<!-- 简化后，可以用name属性代替路径跳转 -->
<router-link 
    :to="{
        name:'detail',
        query:{
            id:m.id,
            title:m.title
        }
    }">
    {{m.title}}
</router-link>

params参数

配置路由，声明接收params参数：

children:[
    {
        name:'detail',
        path:'detail/:id/:title',  //使用占位符声明接收params参数
        component:Detail
    },
]

传递params参数：

<!-- 跳转并携带params参数，to的字符串写法，记得加: -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

<!-- 对象写法，必须使用name配置项 -->
<router-link 
    :to="{
        name:'detail',
        params:{
            id:m.id,
            title:m.title
        }
    }">
    {{m.title}}
</router-link>

注意：路由携带params参数时，对象写法必须使用name配置项，不能使用path配置项

接收（读取）参数

$route.params.id
$route.params.title

路由的props配置

为了让路由组件在接收参数时更方便，只需要在props中声明，不需要再重复写繁琐的计算属性

{
    path:'message',
    component:Message,
    children:[
        {
            name:'detail',
            path:'detail/:id/:title',
            component:Detail,
            //props的第一种写法，值为对象，该对象中所有的key-value值对都会以props的形式传给Detail组件
            //props:{a:1,b:100},  只能传递写死的值，不推荐
            //props的第二种写法，为布尔值，为真时会将收到的所有params参数以props的形式传给Detail组件
            //props:true    只可以接收params参数
            //props的第三种写法，为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
            props($route){
                return {id:$route.params.id,title:$route.params.title}   //params参数与query参数都可以接收
            }
        },
    ]
}

Detail组件中接收（读取）参数

<li>消息id：{{id}}</li>
<li>消息内容：{{title}}</li>

props:['id','title']