ktquez/vue-extend-layout

Router change refresh entire component

shirshak55 opened this issue · 5 comments

Even If i change only query params it refresh entire component which is against vue ideology :(

Thank you for pointing me to this.
Fixed in v2.0.2

Github is having problem . I cannot even close this issue :(

No problem

Currently using this and i am fine :)

<template>
        <component :is="currentLayout"/>
</template>

<script>
export default {
    name: 'VueExtendLayout2',

    props: {
        layout: { type: String, default: 'default' },
        path: {
            type: String,
            default: 'layouts',
        },
    },

    data() {
        return {
            hasLoaded: false,
            layoutName: 'default',
        };
    },

    watch: {
        '$route.meta.layout': {
            immediate: true,
            handler(newLayout) {
                if (!newLayout) { this.layoutName = this.layout || 'default'; return; }
                this.layoutName = newLayout;
            },
        },
    },

    computed: {
        currentLayout() {
            const ln = this.layoutName;
            return () => import(/* webpackChunkName: "layout-[request]" */ `@/${this.path}/${ln}.vue`);
        },
    },
};
</script>

@ktquez new version seem to have bug like even after good route change that change layout, layout is not being changed. Thats why i used above code and it is working fine for me :)