在Vue 3中,路由組件的屬性有所改變。原來的props
選項現在被移除了,取而代之的是props
函數。
const routes = [
{
path: '/user/:id',
component: User,
props: true
}
]
在上面的代碼中,props: true
表示將所有路由參數作為props
注入到組件中。
如果要自定義props
,可以使用函數的方式:
const routes = [
{
path: '/user/:id',
component: User,
props: (route) => ({ id: route.params.id })
}
]
在上面的代碼中,props
函數返回一個對象,對象的屬性id
來自于路由參數id
。
另外,props
函數還可以接收第二個參數route
,它是當前正在被訪問的路由對象。這個參數可以用來從路由對象中獲取其他信息作為props
的屬性:
const routes = [
{
path: '/user/:id',
component: User,
props: (route) => ({ id: route.params.id, name: route.query.name })
}
]
在上面的代碼中,props
函數返回一個對象,對象的屬性id
和name
分別來自于路由參數id
和查詢參數name
。