Vue.js 如何管理 nuxt keep-alive 键？答案

【问题标题】：Vue.js How To Manage nuxt keep-alive key?Vue.js 如何管理 nuxt keep-alive 键？
【发布时间】：2020-08-26 23:26:13
【问题描述】：

我在我的 vue 项目中使用 Nuxt。我想构建一个多标签应用程序。但是我无法管理nuxt的缓存机制。

情况是，我的完整路径从不包含任何参数，即使在更新路径中也是如此。

我的意思是我的道路总是这样

/myapp/customer/更新

而不是

/myapp/customer/update/:id

所以当我尝试像这样绑定 nuxt 键时

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

它不缓存任何东西并不断加载所有生命周期（beforeCreate、created、beforeMount、mounted...）

如果我不使用 :key，

然后 keep-alive 非常适合没有参数的页面

但参数错误。如果我一次路由到 id:3 的客户，那么当我去另一个 id:4 的客户时，它仍然会缓存并显示 id:3 的客户的数据。

这是我的 nuxt-link 代码：

      <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>

下面是我用来查看路线的代码

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

任何帮助都会很高兴。

谢谢...

【问题讨论】：

我不确定，但是当$route.params 为空时，它可能是一个空数组，而不是未定义或 null。这可能会影响您的 if 条件。
@Eldar，谢谢你的回答。是的，正如你所说，它是一个空对象，我修复了这种情况。但这并没有解决问题。

标签： vue.js caching nuxt.js vue-router keep-alive

【解决方案1】：

尝试使用:nuxt-child-key 而不是:key。
https://nuxtjs.org/api/components-nuxt

【讨论】：