Help with routing

[comrade-warm]

I create documentation for the local medical club. I have a table of diseases, I click on a disease and it should route to a separate table with it (there will be explanations of the disease), but instead it shows a 404 error. Can you help with the problem? Because I can't figure out why it doesn't work :(

client.ts:

  enhance({ app, router }) {
    app.component('DiseasePage', DiseasePage),
    router.addRoute({
      path: '/diseases/:code',
      component: DiseasePage,
      props: true
    }),
  },

table.vue

<template>
  <div>
    <h1>ICD-10 Codes</h1>
    <table>
      <thead>
        <tr>
          <th>Code</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="code in codes" :key="code.code">
          <!-- use router-link -->
          <td><router-link :to="`/diseases/${code.code}`">{{ code.code }}</router-link></td>
          <!-- or use router.push -->
          <td @click="goToDisease(code.code)">{{ code.description }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      codes: [
        { code: 'A00', description: 'Cholera' },
        { code: 'A01', description: 'Typhoid and paratyphoid fevers' },
        { code: 'A02', description: 'Other salmonella infections' },
        // more codes and descriptions...
      ],
    };
  },
  methods: {
    goToDisease(code) {
      this.$router.push(`/diseases/${code}`);
    },
  },
};
</script>

diseasepage.vue

<template>
    <div>
      <h1>{{ code }}</h1>
      <p>{{ description }}</p>
      <!-- more details about the disease -->
    </div>
  </template>
  
  <script>
  export default {
    props: {
      code: String
    },
    data() {
      return {
      codes: [
        { code: 'A00', description: 'Cholera' },
        { code: 'A01', description: 'Typhoid and paratyphoid fevers' },
        { code: 'A02', description: 'Other salmonella infections' },
        // more codes and descriptions...
      ],
    };
    },
    async created() {
      // fetch the data for the disease from your database or API
      const response = await fetch(`/api/diseases/${this.code}`);
      const data = await response.json();
      this.description = data.description;
    }
  };
  </script>

[Mister-Hope]

You should create page to let them work. https://v2.vuepress.vuejs.org/advanced/cookbook/adding-extra-pages.html

[comrade-warm]

hm... still leading to 404 error (e.c. localhost:8080/diseases/A00 > 404)

[Mister-Hope]

Some further explanation, to generate ssr result, vuepress cannot generate html files (i.e.: SSG render result) for dynamic routes, so you can not directly visit them.

• If you want a /category/xxx works, then you should use app.pages.push(...data.map(createPage)) to generate every page with your data, so that vuepress know these pages and their content and render them for you.
• If you want to dynamically render them at client, then using param is a good idea, i.e.: build a /category/detail page, where you can have /category/detail?name=AAA and /category/detail?name=bbb running

[comrade-warm]

I don't quite understand how to use app.pages.push(...data.map(createPage)) in VuePress. And there is nowhere to see an example of implementation. Let's say from the table:

 codes: [
        { code: 'A00', description: 'Cholera' },
        { code: 'A01', description: 'Typhoid and paratyphoid fevers' },
        { code: 'A02', description: 'Other salmonella infections' },
        // more codes and descriptions...
      ],

can VuePress generate static pages like category/xxx

[Mister-Hope]

This is all I can help, for details of how to write codes, you should try to read some examples and source code. I do not have time for a detailed tutorial