Vue路由传参

简化路由参数传递与管理：query、params和props详解

最新推荐文章于 2025-09-07 10:00:00 发布

原创最新推荐文章于 2025-09-07 10:00:00 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Vue Router中query参数的传递方法，params用于接收位置参数，以及如何通过props让组件更高效地接收路由参数。通过实例展示了如何在路由配置中使用命名和简化路径来提升开发效率。

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']