vue——路由的props

最新推荐文章于 2025-02-22 19:01:15 发布

cc_xxo

最新推荐文章于 2025-02-22 19:01:15 发布

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/cc_xxo/article/details/123296901

版权

本文介绍了Vue路由中props的三种配置方式：1) props: {key: value}，用于固定值传递；2) props: true，适用于params传参，要求接收组件的props与path占位符匹配；3) props(route){return {}}，动态返回props对象，同样需要指定props。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于获取传输数据时$route.params会会多次出现，给路由配置props属性可减轻代码的编写需要在接收参数的组件配置相应的props

配置方式1、props: {key:value}

routes: [
	{
		path: 'message',
		component: MyMessage,
		children: [
			{
				name: 'HomeMessageDetail',
				path: 'detail/:id/:title',
				component: MyDetail,
				props: {a:900}
			},
		]
	},
]

<template>
	<ul>
		<li>{{a}}</li>
	</ul>
</template>
<script>
	export default {
		name: 'MyDetil',
		props:['a']
	}
</script>

但这种方式传递的值是固定的

配置方式2、props: true

routes: [
	{
		path: 'message',
		component: MyMessage,
		children: [
			{
				name: 'HomeMessageDetail',
				path: 'detail/:id/:title',
				component: MyDetail,
				props:true
			},
		]
	},
]

<template>
	<ul>
		<li>{{a}}</li>
	</ul>
</template>
<script>
	export default {
		name: 'MyDetil',
		props:['id','title']
	}
</script>

这种方式只适用于params传参，并且在接收参数的组件配置与路由中path中占位符相同的props

方式3、props(route){return {}}

routes: [
	{
		path: 'message',
		component: MyMessage,
		children: [
			{
				name: 'HomeMessageDetail',
				path: 'detail/:id/:title',
				component: MyDetail,
				props(route){
					return { 
						id: route.query.id,
						title: route.query.title
					}
				}
			},
		]
	},
]

<template>
	<ul>
		<li>{{a}}</li>
	</ul>
</template>
<script>
	export default {
		name: 'MyDetil',
		props:['id','title']
	}
</script>