Два разных маршрута, использующие одни и те же дочерние компоненты, по-разному оценивают данные

Question

Используя Vue3 и vue-router4, два разных компонента используют одни и те же дочерние компоненты. Шаблоны компонентов настраиваются следующим образом:

С учетом вышеизложенного значение selected в фильтре данные оцениваются, и предполагаемый результат состоит в том, что при загрузке компонентов фильтры в $ route устанавливаются в данные.

Проблема в том, что дочерние компоненты и идентичны:

• ComponentA не работает должным образом, если найденные в маршруте совпадения не установлены в данных.
• ComponentB делает работу по назначению, где найденные совпадения в маршруте будут установлены в true в filters данные.

Answer 1

Я могу воспроизвести проблему только в том случае, если не введен ключ, поэтому предполагаю, что это то, что у вас есть.

Если есть два router-links к тому же компоненту, но с разными size параметры запроса (как показано ниже), и вы нажимаете одну ссылку, а затем другую, Vue повторно использует существующий экземпляр компонента, поэтому компонент data() не вызывается, и параметр запроса не оценивается повторно.

      <router-link to="/componenta/xyz?size=1m">A (size=1m)</router-link> |
<router-link to="/componenta/xyz?size=0">A (size=0)</router-link> |

Чтобы гарантировать создание нового компонента для каждого изменения маршрута, укажите router-view ключ на <tcode id="51314954"></tcode> (который включает параметры запроса):

      <router-view :key="$route.fullPath"></router-view>

демонстрация

Answer 2

На мой взгляд, проблема здесь, ваши данные не пересчитываются при изменении маршрута, попробуйте изменить локальные данные при изменении маршрута. Попробуйте добавить отладчик перед оператором return в данных, он придет только один, даже если измените маршрут.