when nesting router-view component into transtion component throw bug: vm is undefined

[jide123456]

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、如果你知道这个问题怎么解决、快来告诉我吧、

非常感谢、

[fnlctrl]

请给重现(jsfiddle, codepen, etc)，
非常感谢。

[jide123456]

@fnlctrl 因为是多文件、又涉及到路由、 我不知道怎样把它们上传到 jsfiddle 这些网站上、所以我把项目打包上传到了我的github中了 https://github.com/jide123456/blog

I upload project to my github https://github.com/jide123456/blog
我把项目上传到了我的github中了

download or git clone it
下载或者git clone 它

cmd run npm install and npm run dev browse project
命令行运行 npm install npm run dev 浏览项目

open browser call http://localhost:8080 will look below Index picture
打开浏览器访问http://localhost:8080 你将看见下首页图

click red arrows title, look right side console panel, BUG reappear, such below picture
点击红箭头指的标题、等待路由跳转后、 查看f12中的console面板、 bug重现

[jide123456]

@fnlctrl @yyx990803

我把问题定位了

当transition组件的mode是out-in时， beforRouteEnter钩子会在组件初次导航到时读取不到vm参数

这是代码 http://jsfiddle.net/u46tm6ay/4/

[jide123456]

不知道这是特性还是bug

[LinusBorg]

Probably the same issue as #648

[jide123456]

@LinusBorg Thanks you :D . #648 I not long age looked. but I think them not same.

my example very simple . it only use Transition and beforRouterEnter.

(:з」∠) I'm not sure what the problem is the component compatibility or I wrote was wrong

[LinusBorg]

I started looking into this (with repo https://jsfiddle.net/u46tm6ay/4/), but haven't found the root cause. What I have so far:

When a transition is running, these lines appearantly don't run:

This leads to match.instances here not having an instance to pass to the callback.

This only happens when we transition from one route to the other, not on the first visit of the first route (when there is no previous route to transition out of).

Now the root of this must be in a combination of the transition component, the router-view component and the virtualDOM, resultinh in the parent element having vnode._inactive set when it shouldn't (or we should work around this for the case in discussion).

..or maybe I'm totally on the wrong track ^^