vue-router 1的用法
https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
data(transition) [-> Promise]
Called on an incoming component during the activation phase, after the activate hook has been resolved. It is also called when the route has changed and the current component is reused. Use this hook to load and set data on the current component.
激活階段之后立哑，在激活鉤子解決后龟虎，在傳入的組件上調(diào)用仿野。當(dāng)路由更改并且當(dāng)前組件被重用時也會調(diào)用它节芥。使用此鉤子來加載和設(shè)置當(dāng)前組件上的數(shù)據(jù)篇恒。
Arguments
? transition {Transition}Calling transition.next(data) will set each property in data on the component. For example, with { a: 1, b: 2 }, the router will call component.$set('a', 1) and component.$set('b', 2).
調(diào)用transition.next（data）將在組件的數(shù)據(jù)中設(shè)置每個屬性核偿。例如敲董，使用{a：1空免，b：2}空另，路由器將調(diào)用組件$ set（'a'，1）和組件$ set（'b'蹋砚，2）扼菠。
Expected Return Value
? optionally return a Promise.
? resolve(data) -> transition.next(data)
? reject(reason) -> transition.abort(reason)
** ? OR:** return an Object containing Promises. See Promise sugar below.
Details
The data transition hook is called immediately after the activate hook is resolved, and right before the view switching is executed. The entering component gets a $loadingRouteData meta property, which starts with value true and set to false when the data hook is resolved. This property can be used to display a loading state for the entering component.
When resolved, the component will also emit a 'route-data-loaded' event.
激活鉤子解析后立即調(diào)用數(shù)據(jù)轉(zhuǎn)換掛鉤摄杂，并在執(zhí)行視圖切換之前立即調(diào)用。進入組件獲取一個** $ loadRouteData **元屬性循榆，它以值為true開始析恢，并在數(shù)據(jù)鉤子解析時設(shè)置為false。此屬性可用于顯示輸入組件的加載狀態(tài)秧饮。
解決時映挂，組件還將發(fā)出“路由數(shù)據(jù)加載”事件。
The data hook is different from activate in that:
- data is also called every time the route changes, even if the current component is reused, while activate is only called when component is newly created.
Imagine we have a component for the route /message/:id, and we are currently on /message/1. When the user navigates to /message/2, the current component can be reused, so the activate hook will not get called. But we do want to fetch and update the data based on the new id param, so in most cases it makes sense to do data fetching in data instead of activate.
數(shù)據(jù)鉤與激活不同：
即使當(dāng)前組件被重用盗尸，每次路由更改也會調(diào)用數(shù)據(jù)柑船，而激活只有當(dāng)組件被新建時才被調(diào)用。
想象一下泼各，我們有一個路由/ message /：id的組件鞍时，我們目前在/ message / 1。當(dāng)用戶導(dǎo)航到/ message / 2時历恐，當(dāng)前組件可以被重用寸癌，所以激活鉤子不會被調(diào)用。但是弱贼，我們希望基于新的id參數(shù)獲取和更新數(shù)據(jù)蒸苇，因此在大多數(shù)情況下，使用數(shù)據(jù)獲取數(shù)據(jù)而不是激活是有意義的吮旅。
2.activate's responsibility is controlling the timing of switching to the new component. In comparison, data is called right after activate is resolved and right before the view switching happens, so the data fetching and the new component's entering animation will go in parallel, and the component will be in a "loading" state before data is resolved.
激活的責(zé)任是控制切換到新組件的時間溪烤。相比之下，數(shù)據(jù)在激活解決后立即被調(diào)用庇勃，恰好在視圖切換發(fā)生之前檬嘀，所以數(shù)據(jù)獲取和新組件的輸入動畫將并行，并且組件將在數(shù)據(jù)解析之前處于“加載”狀態(tài)责嚷。
Let's consider the difference in the User Experience here:
? If we wait for the data to be fetched before displaying the new component, the user will feel like the interface is "stuck" for a split second before the view switches.
?如果我們等待在顯示新組件之前獲取數(shù)據(jù)鸳兽，那么在視圖切換之前，用戶會覺得界面“卡住”了一秒鐘罕拂。
? Instead, we can react to user input instantly and start switching the view, while displaying the new component with a "loading" state. If we have a CSS transition in between, the animation time can overlap nicely with the data wait time.
?相反揍异，我們可以立即對用戶輸入做出反應(yīng)，并開始切換視圖爆班，同時以“加載”狀態(tài)顯示新組件衷掷。如果我們之間有一個CSS轉(zhuǎn)換，動畫時間可以很好地與數(shù)據(jù)等待時間重疊柿菩。
With that said, if you still wish to wait until data is loaded before switching the view, you can add waitForData: true inside your component's route option.
Examples
By calling transition.next:
route: {
data: function (transition) {
setTimeout(function () {
transition.next({
message: 'data fetched!'
})
}, 1000)
}
}
By returning a Promise:
route: {
data: function (transition) {
return messageService
.fetch(transition.to.params.messageId)
.then(function (message) {
return { message: message }
})
}
}
Parallel requests, with Promise & ES6:
route: {
data ({ to: { params: { userId }}}) {
return Promise.all([
userService.get(userId),
postsService.getForUser(userId)
]).then(([user, post]) => ({ user, post }))
}
}
Equivalent of above in ES5:
route: {
data (transition) {
var userId = transition.to.params.userId
return Promise.all([
userService.get(userId),
postsService.getForUser(userId)
]).then(function (data) {
return {
user: data[0],
posts: data[1]
}
})
}
}
Using $loadingRouteData in templates:
<div class="view">
<div v-if="$loadingRouteData">Loading ...</div>
<div v-if="!$loadingRouteData">
<user-profile user="{{user}}"></user-profile>
<user-post v-for="post in posts" :post="post"></user-post>
</div>
</div>
Promise Sugar
The parallel data fetching example above requires us to leverage Promise.all to combine multiple Promises into a single one, and the desturcturing and formatting is still a bit cumbersome. vue-router provides a syntax sugar which allows you to return an Object containing Promises (it can contain non-Promise fields too, of course).
上述的并行數(shù)據(jù)獲取示例要求我們利用Promise.all將多個Promises組合成一個戚嗅，并且desturcturing和格式化仍然有點麻煩。 vue-router提供了一個語法糖，它允許您返回包含Promises的對象（當(dāng)然也可以包含非Promise字段）懦胞。
Here's the same example using the syntax sugar and ES6:
route: {
data: ({ to: { params: { userId }}}) => ({
user: userService.get(userId),
post: postsService.getForUser(userId)
})
}
The router will set the component's user and post fields to the corresponding Promises' resolved values when they are resolved. $loadingRouteData will be set to false when all Promises have been resolved.
Equivalent in ES5:
route: {
data: function (transition) {
var userId = transition.to.params.userId
return {
user: userService.get(userId),
post: postsService.getForUser(userId)
}
}
}
參考網(wǎng)址：https://github.com/vuejs/vue-router/blob/1.0/docs/en/pipeline/data.md
Contact GitHub API Training Shop Blog About
