Closed
Description
I have these files
app.vue
<template>
<div>
<transition name="fade" mode="out-in">
<router-view class="route-view"></router-view>
</transition>
</div>
</template>list.vue
export default {
data () {
return {
list: []
}
},
components: {
myHead,
myFoot,
sideClass,
sideAbout,
listItem
},
beforeRouteEnter (to, from, next) {
getList(to.params)
.then(res => {
next(vm => {
// here vm is undefined
vm.list = res.articles //Uncaught (in promise) TypeError: Cannot set property 'list' of undefined(…)
})
}).then(() => {
next(false)
})
}
}such above code, I use beforeRouteEnter hook to fetch data, but runtime throw error : Uncaught (in promise) TypeError: Cannot set property 'list' of undefined(…)
I console.log(vm) discover vm is undefined
but, I nonuse transition component, the bug no throw such below code
app.vue
<template>
<div>
<!-- <transition name="fade" mode="out-in"> -->
<router-view class="route-view"></router-view>
<!-- </transition> -->
</div>
</template>I want know how to use beforeRouteEnter hook meanwhile use transition component no throw the bug
Thanks very mush. forgive my engilsh is poor.
Chinese describe:
当我使用过度效果的时候我发现了一个问题， 那就是当过度组件和路由组件同时使用时(第一个app.vue)，会导致 beforeRouteEnter 钩子中的vm参数无法正常获取(其值为undefined)、 导致我给实例赋值会产生抛出异常(list.vue)、
当我注释掉transition组件后恢复正常、
so、如果你知道这个问题怎么解决、快来告诉我吧、
非常感谢、