router路由传参 - props

最新推荐文章于 2025-06-02 09:02:39 发布

源小新

最新推荐文章于 2025-06-02 09:02:39 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/yuan_xiaoxin/article/details/117353037

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细探讨了如何在Vue中通过router props进行参数传递，旨在降低模块间的耦合度。内容包括什么是代码耦合及其影响，以及props的三种模式：布尔模式、对象模式和函数模式的使用方法，帮助开发者更好地理解和应用Vue路由传参。

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

使用props路由传参

路由传参 - props

路由传参 - props

使用props可以降低耦合度,取代$route

什么是代码的耦合?

模块之间的联系紧密成度
联系越紧密就是耦合度越高，这样是不好的。因为模块和模块要低耦合才对。。

高内聚、低耦合的模块是设计时追求的目标。

衡量模块独立性的定性标准是内聚（一个模块内各个元素彼此结合的紧密程度）和耦合（一个软件结构内不同模块之间互连程度的度量）。

路由代码传参

import About from '@/About'
{
	path :'/about/:id',//动态路由
	component:About,
	props:true
}

{
	path:'/about',//普通路由
	component:About,
	props:{
		id:19
	}
}

模板代码传参

	props:['id']
	或者
	props:{
		id:{
			type:Number,//数据约束类型
			default:12//默认参数
		}
	}

布尔模式

如果props被设置为 true , router.params将会被设置为组件属性.
路由中

{
	path:"/about/:id"//动态路由
	component:About,
	props:true
}

组件中接收:

props:['id']

对象模式

如果props是一个对象,他会被设置为组件属性.
路由中:

path:'/about/:id',//动态路由
component:About,
props:{
	id:18
}

组件中接收

props:{
	id:{
		type:Number,//约束类型
		default:12//默认参数
	}
}

函数模式

你可以创建一个函数返回props.这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等.

routes:[
	{
		path:'/search',
		component:SearchUser,
		props:route => ({name:route,query.q})//返回对象 可以用()包住,
		//或者
		props:a=>{
			return{
				name:a.query.name
			}
		}
	}
]

props:()=>({name:'张三'})