[Vue] Séparer une liste en plusieurs vues routées ?

Bonjour,

Je saurais pas trop expliquer ça, mais j'aimerais créer une "librairie" qui lorsqu'on clique sur un item, on est dirigé vers ce que l'on a demandé, mais je me suis perdu je pense.. Pourquoi je me prends la tête ? Je voudrais utiliser qu'une seule vue pour toutes ces routes pour que les données soient modifiables avec Firebase par la suite.

Par exemple, on peut visiter de lien en lien : site/hallucinogens/psychedelics/mushrooms..
Je voudrais faire comme un chemin que l'on peut parcourir : chaque page utilise la même vue mais pas les mêmes items.
J'ai donc essayé de me débrouiller avec les v-if en fonction de la route, ça marche un peu mais pas complètement.

Ma vue :

<template>
    <div>
        <p>{{ $route.params.id }}</p>
        <ul v-if="!$route.params.id">
            <li v-for="(item, index) in items" v-bind:key="index">
                <router-link :to="{ path: '/risks-reduction/' + item.name }">
                    {{ item.fullName }}
                    <!-- <span v-if="item.classes">{{ item.classes[0].name }}</span> -->
                    <!-- <p>{{ item.classes }}</p> -->
                </router-link>
            </li>
        </ul>
        <ul v-if="$route.params.id">
            <li v-for="(item, index) in items[0].classes" v-bind:key="index">
                <router-link :to="{ path: $route.path + '/' + item.name }">
                    {{ item.fullName }}
                    <!-- <span v-if="item.classes">{{ item.classes[0].name }}</span>
                    <p>{{ item.classes }}</p>-->
                </router-link>
            </li>
        </ul>
        <ul v-if="$route.params.family">
            <li v-for="(item, index) in items[0].classes[0].substances" v-bind:key="index">
                <router-link :to="{ path: $route.path + '/' + item.name }">
                    {{ item.fullName }}
                    <!-- <span v-if="item.classes">{{ item.classes[0].name }}</span>
                    <p>{{ item.classes }}</p>-->
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
    props: ["id", "family", "substances"],
    data() {
        return {
            items: [
                {
                    name: "hallucinogens",
                    fullName: "Hallucinogènes",
                    classes: [
                        {
                            name: "psychedelics",
                            fullName: "Psychédéliques",
                            substances: [
                                {
                                    name: "mushrooms",
                                    fullName: "Champignons Psilocybe"
                                },
                                {
                                    name: "lsd",
                                    fullName: "LSD"
                                }
                            ]
                        },
                        {
                            name: "dissociatives",
                            fullName: "Dissociatifs",
                            substances: [
                                {
                                    name: "nitrous_oxide",
                                    fullName: "Protoxyde d'azote"
                                },
                                {
                                    name: "ketamine",
                                    fullName: "Kétamine"
                                }
                            ]
                        }
                    ]
                }
            ]
        };
    },
});
</script>

Router.ts :

{
      path: '/risks-reduction/',
      name: 'risks-reduction',
      component: RisksReduction,
      props: true,
      children: [
        { path: '/risks-reduction/:id', props: true },
        { path: '/risks-reduction/:id/:family', props: true },
        { path: '/risks-reduction/:id/:family/:substances', props: true },
      ]
      // J'ai essayé de le faire sans recopier le path à chaque fois, mais c'est un échec
    }

Bon, c'est un peu fait à l'arrache mais je vois pas comment faire autrement ^^'

Peut être que je me suis mal exprimé, alors si vous avez des questions ou conseils, je suis preneur :)

Merci d'avance !