Question

在Nuxt中。当我使用动态路由时，有时它不会更新动态路由页面中的内容，这些不一致令人沮丧，我想知道是否有任何避免此类不一致的指标，以适应我的项目扩展。

这是一个我可以深入了解的例子。

我的动态路线如下

fetch/index.vue

显然还有一个layout.vue。

现在，fetch/index.vue中的代码如下：

<template>
  <div>
    <transition name="fade" mode="out-in">
      <span>loading - {{ params.path }}</span>
    </transition>
  </div>
</template>

<script>
export default {
  async asyncData({ params, store }) {
    return {
      params: params
    }
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>

指向它的链接如下：

<template v-for="(entity, index) in entities">
  <nuxt-link
    :key="index"
    :to="{ name: 'fetch', params: { path: '/entities/' + index } }"
  >
    {{ entity }}
  </nuxt-link>
</template>

因此，当我最初单击链接时，它的确显示了<span>loading - {{ params.path }}</span>。但是，当我在链接之间单击时，即使参数更改了，它也不会更改<span>loading - {{ params.path }}</span>中的值。

请问有什么理由或以某种方式可以修复它或做得更好吗？

为什么nuxt中的动态路由在反应性方面不一致

0 个答案: