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.
激活阶段之后，在激活钩子解决后，在传入的组件上调用。当路由更改并且当前组件被重用时也会调用它。使用此钩子来加载和设置当前组件上的数据。
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).
调用transition.next（data）将在组件的数据中设置每个属性。例如，使用{a：1，b：2}，路由器将调用组件$ 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.
激活钩子解析后立即调用数据转换挂钩，并在执行视图切换之前立即调用。进入组件获取一个** $ loadRouteData **元属性，它以值为true开始，并在数据钩子解析时设置为false。此属性可用于显示输入组件的加载状态。
解决时，组件还将发出“路由数据加载”事件。
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.
数据钩与激活不同：
即使当前组件被重用，每次路由更改也会调用数据，而激活只有当组件被新建时才被调用。
想象一下，我们有一个路由/ message /：id的组件，我们目前在/ message / 1。当用户导航到/ message / 2时，当前组件可以被重用，所以激活钩子不会被调用。但是，我们希望基于新的id参数获取和更新数据，因此在大多数情况下，使用数据获取数据而不是激活是有意义的。
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.
激活的责任是控制切换到新组件的时间。相比之下，数据在激活解决后立即被调用，恰好在视图切换发生之前，所以数据获取和新组件的输入动画将并行，并且组件将在数据解析之前处于“加载”状态。
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.
•如果我们等待在显示新组件之前获取数据，那么在视图切换之前，用户会觉得界面“卡住”了一秒钟。
• 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.
•相反，我们可以立即对用户输入做出反应，并开始切换视图，同时以“加载”状态显示新组件。如果我们之间有一个CSS转换，动画时间可以很好地与数据等待时间重叠。
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).
上述的并行数据获取示例要求我们利用Promise.all将多个Promises组合成一个，并且desturcturing和格式化仍然有点麻烦。 vue-router提供了一个语法糖，它允许您返回包含Promises的对象（当然也可以包含非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)
}
}
}
参考网址：https://github.com/vuejs/vue-router/blob/1.0/docs/en/pipeline/data.md
Contact GitHub API Training Shop Blog About
