Vue keep-alive label not working when setting the keepAlive true

Question

I have three routes in my project, dashboard dashboard_detail and app_score.

I want to keep my data not refreshing again when I return to dashboard through detail page.

<keep-alive v-if="$route.meta.keepAlive">
            <router-view></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>

I had set a variable called 'keepAlive' in the meta label in route>index.js.

But the problem is it always refresh when returned.

Answer 1

<keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>