Vue.js How To Manage nuxt keep-alive key?

Question

I am using Nuxt for my vue project. I want to build a multi-tab application. But I could not manage the caching mechanism of nuxt.

The case is that, my full path never contains any parameters even in update paths.

I mean my paths are always like

/myapp/customer/update

instead of

/myapp/custmer/update/:id

So when I try to bind the nuxt key like

<nuxt keep-alive :key="$route.path + ($route.params ? JSON.stringify($route.params) : '')" />

It does not caches anything and keeps loading all lifecyles (beforeCreate, created, beforeMount, mounted...)

If I do not use :key,

then keep-alive works perfect for pages without parameters

but works wrong with parameters. If I route to customer with id:3 once, then when I go to another customer with id:4, it still caches and displays the data of customer with id:3.

Here is my nuxt-link code:

      <span
        v-for="(tag, index) in tabbedViews"
        :key="tag.name + (tag.params ? JSON.stringify(tag.params) : '')"
      >
        <nuxt-link
          :key="tag.name + (tag.params ? JSON.stringify(tag.params) : '')"
          :to="{ name: tag.name, params: tag.params }"
          @click.native="tabClicked(index)"
        >
          {{ tag.name }}
          <span
            v-if="!tag.keepOpen"
            class="el-icon-close"
            @click.prevent.stop="closeSelectedTag(index)"
          />
        </nuxt-link>
      </span>

And below is the code that I use for viewing routes

<nuxt keep-alive :key="$route.path + ($route.params ? JSON.stringify($route.params) : '')" />

Any help will be pleasured.

Thank you...

Answer 1

Try to use :nuxt-child-key instead of :key.
https://nuxtjs.org/api/components-nuxt