transition is not work for router-view in app.vue

Question

transition is not work for router-view in app.vue

znzn40 opened this issue 6 years ago · 4 comments

When I was using thevue-cli-plugin-auto-routing, which use the vue-router-layout inside. I found that, the transition in app.vue is not working as expected. (the leave transition was missing)

Answer 1 · 2019-01-03T08:59:12.000Z

the root cause is, the RouterLayout component is reused in transition, so, I added one key in router-view.

The leave transition is ok now, but the enter transition is missing.

that is caused by empty layoutName, since the App component is created before RouterLayout, and $_routerLayout_notifyUpdate is not ready for App component.

Answer 2 · 2019-01-03T09:01:01.000Z

my solution:
add created() in RouterLayout

created(){
            let name = this.layoutName = resolveLayoutName(this.$route.matched) || this.layoutName;
            if (!this.layouts[name]) {
                this.$set(this.layouts, name, function () { return resolve(name); });
            }
        },

Answer 3 · 2019-01-04T03:16:38.000Z

Could you provide a reproduction to confirm?

Answer 4 · 2019-09-09T07:47:16.000Z

Closing as reproduction is not provided. Please open a new issue with a reproduction if this still persists. Thanks.