const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
通過props解耦
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 對于包含命名視圖的路由广凸，你必須分別為每個命名視圖添加 `props` 選項(xiàng)：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
如果 props 被設(shè)置為 true峦萎，route.params 將會被設(shè)置為組件屬性。
props為對象模式的時候
- 如果 props 是一個對象剩拢，它會被按原樣設(shè)置為組件屬性医增。當(dāng) props 是靜態(tài)的時候有用。
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
函數(shù)模式
- 你可以創(chuàng)建一個函數(shù)返回 props谅河。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型咱旱，將靜態(tài)值與基于路由的值結(jié)合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
URL
/search?q=vue會將{query: 'vue'}作為屬性傳遞給SearchUser組件绷耍。
請盡可能保持 props 函數(shù)為無狀態(tài)的吐限，因?yàn)樗粫诼酚砂l(fā)生變化時起作用。如果你需要狀態(tài)來定義 props褂始，請使用包裝組件诸典，這樣 Vue 才可以對狀態(tài)變化做出反應(yīng)。
