Почему динамические маршруты в nuxt несовместимы, когда речь идет о реактивности - PullRequest
Новая
       86

Почему динамические маршруты в nuxt несовместимы, когда речь идет о реактивности

0 голосов
/ 21 июня 2019

в 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>, даже если параметры меняются.

Есть ли какая-либо причина, по которой или каким-либо образом я могу это исправить или сделать это лучше?

...