How to correctly pass data through $route?

Question

Vue.js

Hello I am using nuxt.
I have an element structure like this:

<div class="directory-sympthoms-content-list">
        <a 
        href="#"
        v-for="(item, key, index) of sympthoms"
        :key = "item.id"
        @click.prevent = "openSympthom(item)"
        class="directory-sympthoms-content-list__item base-h2">
          {{ item.title }}
        </a>
      </div>
<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        sympthoms: []
      }
    },
    methods: {
      openSympthom(item) {
        this.$router.push('/directory/sympthoms/' + item.id)
      }
    },
    mounted() {
      axios
      .get('json/directory/allergy.json')
      .then(response => this.sympthoms = response.data)
    }
  }
</script>

I have a page directory/sympthoms/_title.vue

The construct of this page is:

<template>
  <div class="directory-sympthoms">

    <NuxtLink class="go-away" to="/directory">
      <BaseIconArrowLeft class="go-away__icon" />
      <BaseH1 class="blue"> {{ $route.params.title }}</BaseH1>
    </NuxtLink>

    <div class="container">
      {{ $route.params }}
    </div>

  </div>
</template>

<style scoped lang="scss">
  @import '~/assets/scss/directory.scss';
</style>

<script>
  import axios from 'axios'
  import {mapActions, mapGetters} from 'vuex'
  export default {
    // data() {
    // 	return {
    // 		sympthoms: []
    // 	}
    // },
    methods: {
      openSympthom(item) {
        this.$router.push('/directory/sympthoms/' + item.title)
      }
    },
    // mounted() {
    // 	axios
    // 	.get('json/directory/allergy.json')
    // 	.then(response => this.sympthoms = response.data)
    // }
  }
</script>

I want to be able to output other information from the JSON element besides the title.
My JSON:

[{"id":"1","title":"Аллергическая сыпь (крапивница)","content":"Аллергическая сыпь может являться либо не являться аллергической реакцией.Если аллергическая сыпь длилась менее 6 недель, то причиной обычно является аллергическая реакция на конкретное вещество, острая инфекция или неаллергическая реакция на конкретное вещество.Если аллергическая сыпь длилась 6 недель и более, то причина обычно не может быть выявлена (идиопатическая) или причиной является аутоиммунное заболевание.Люди должны вызывать скорую помощь, если у них затрудненное дыхание или если они чувствуют, что их горло как будто закрывается.Люди с симптомами легкой степени тяжести должны избегать любых известных или подозреваемых провоцирующих факторов и могут принимать антигистаминные препараты для облегчения симптомовЛюди с тяжелыми реакциями должны иметь адреналиновый шприц-ручку для самостоятельных инъекций и, если возникает реакция, немедленно использовать его.","date":"22.03.21","time":"12:30"},{"id":"2","title":"Бессонница и чрезмерная дневная сонливость","date":"22.01.21","time":"10:30"},{"id":"3","title":"Газы","date":"22.01.21","time":"10:30"},{"id":"4","title":"Головная боль","date":"22.01.21","time":"10:30"},{"id":"5","title":"Головокружение и системное головокружение","date":"22.01.21","time":"10:30"},{"id":"6","title":"Желтуха у взрослых","date":"22.01.21","time":"10:30"},{"id":"7","title":"Желтуха у новорожденных (гипербилирубинемия)","date":"22.01.21","time":"10:30"},{"id":"8","title":"Затрудненное глотание","date":"22.01.21","time":"10:30"},{"id":"9","title":"Зуд","date":"22.01.21","time":"10:30"}]

Please tell me the best way to do it)

Answer 1

Sending data hidden through route paramsis bad (but possible ). If someone opens the page directly, he will not see anything. Each page should be able to get data on its own. There are two solutions: 1. To score and rely on browser caching: it caches the first json load, picks up the second one from memory, the delay will be minimal. 2. You have vuex connected, put data there and show data from there. And only if the data is not there - upload them there. Regardless of the page. push({name: <name>, params: {...}})