Vue.js如何管理nuxt keep-alive key?
Vue.js How To Manage nuxt keep-alive key?
我正在为我的 vue 项目使用 Nuxt。我想构建一个多选项卡应用程序。但是我无法管理nuxt的缓存机制。
情况是,即使在更新路径中,我的完整路径也不包含任何参数。
我的意思是我的路径总是这样
/myapp/customer/update
而不是
/myapp/custmer/update/:id
所以当我尝试绑定 nuxt 键时
<nuxt keep-alive :key="$route.path + ($route.params ? JSON.stringify($route.params) : '')" />
它不缓存任何东西并持续加载所有生命周期(beforeCreate、created、beforeMount、mounted...)
如果我不使用: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.
这是我的 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) : '')" />
我们很乐意提供任何帮助。
谢谢...
尝试使用 :nuxt-child-key
而不是 :key
。
https://nuxtjs.org/api/components-nuxt
我正在为我的 vue 项目使用 Nuxt。我想构建一个多选项卡应用程序。但是我无法管理nuxt的缓存机制。
情况是,即使在更新路径中,我的完整路径也不包含任何参数。
我的意思是我的路径总是这样
/myapp/customer/update
而不是
/myapp/custmer/update/:id
所以当我尝试绑定 nuxt 键时
<nuxt keep-alive :key="$route.path + ($route.params ? JSON.stringify($route.params) : '')" />
它不缓存任何东西并持续加载所有生命周期(beforeCreate、created、beforeMount、mounted...)
如果我不使用: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.
这是我的 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) : '')" />
我们很乐意提供任何帮助。
谢谢...
尝试使用 :nuxt-child-key
而不是 :key
。
https://nuxtjs.org/api/components-nuxt