1

I want to exclude multiple components from my KeepAlive component. I tried excluding multiple components but it only works for one single component.

<KeepAlive exclude="DetailView, NewClaim">
    <router-view v-if="isAuthenticated"></router-view>
</KeepAlive>

import NewClaimVue from "./views/NewClaim/NewClaim.vue";
import DetailViewVue from "./views/DetailView/DetailView.vue";

So here, my DetailView is getting excluded but not NewClaim component.

RAGHAVENDRA DUBEY
  • 11
  • 5
  • Give it a try with an array `[DetailView, NewClaim]` – kissu Oct 10 '22 at 08:31
  • I tried [DetailView, NewClaim] , but both the components are not working now. @kissu – RAGHAVENDRA DUBEY Oct 10 '22 at 10:10
  • Maybe forgot to have `:exclude`? Not sure if it's needed here but I guess so. – kissu Oct 10 '22 at 10:26
  • Still it shows the same. Isn't there any other to cache the current tabs without using Keep-Alive ? @kissu – RAGHAVENDRA DUBEY Oct 10 '22 at 10:38
  • Nope, there is not other way. Looking at [the example here](https://vuejs.org/guide/built-ins/keep-alive.html#include-exclude), the proper syntax looks like this: `:exclude="['DetailView', 'NewClaim']"` but you maybe want `include` here rather? – kissu Oct 10 '22 at 11:01
  • Can you please look into this issue ? @kissu https://stackoverflow.com/questions/74028257/routing-issues-when-navigating-to-same-component/74028600?noredirect=1#comment130713079_74028600 – RAGHAVENDRA DUBEY Oct 12 '22 at 11:29

1 Answers1

1

Include / Exclude

The match is checked against the component's name option, so components that need to be conditionally cached by KeepAlive must explicitly declare a name option.

Name

interface ComponentOptions { name?: string }

check your NewClaim and DetailView component name and use it as string.

W J
  • 36
  • 3