[2.0] Can't resolve `beforeRouteEnter` with async component

[JounQin]

Vue.js & vue-router.js version

2.0.0-rc.4, 2.0.0-rc.4

Reproduction Link

https://github.com/JounQin/vue-router/commit/d8c6b9febc50b853fb2753d89c5f241e969368ba

Steps to reproduce

just change Qux.vue to an async component

What is Expected?

resolve async data at the first time

What is actually happening?

it doesn't work at the first time but when entering the route next time, it works.

[LinusBorg]

"it doesn't work at the first time"

What does happen?

[JounQin]

@LinusBorg vm.msg doesn't change, what means the hook beforeRouteEnter doesn't execute.

[JounQin]

Actually, I think the beforeRouteEnter hook is not very good enough.

We use it to resolve async data but we still need to define it when the component initialization on data hook, it's seem excess because we just need the async data when the async function resolved.

For now, I prefer to use the beforeEach hook to request async data and store it into the meta key then we will be able to define properties on the beforeCreate hook of component like Object.assign(this, this.$route.meta.data); so that we will have all the data properties automatically!

So, beforeRouteEnter hook becomes unnecessary right?

[yyx990803]

@JounQin using meta is hacky because you are mutating the same object over time, AND if you do not declare it in data, the data you set on the component is not reactive.

Declaring fields in data is a best practice to ensure you always know what fields are possibly present on a component.