src/components/MarkdownFile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onBeforeUpdate } from "vue";
 import { marked } from "marked";
 import axios from "axios";
 
@@ -9,9 +9,11 @@ const props = defineProps<{
 
 const htmlContent = ref("");
 
-onMounted(() => {
+function refresh() {
+  const markdownFileUrl = `/${props.path}.md`;
+  console.log(`Chargement de l'URL ${markdownFileUrl}`);
   axios
-    .get(`/${props.path}.md`)
+    .get(markdownFileUrl)
     .then((response) => (htmlContent.value = marked.parse(response.data)))
     .catch(
       () =>
@@ -19,6 +21,14 @@ onMounted(() => {
           "# 404 Not Found \n \n La page recherchée n'a pas pu être trouvée"
         ))
     );
+}
+
+onMounted(() => {
+  refresh();
+});
+
+onBeforeUpdate(() => {
+  refresh();
 });
 </script>
 

src/views/RuleView.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import MarkdownFile from "../components/MarkdownFile.vue";
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-const category = route.params.category;
-const filepath = route.params.filepath;
 </script>
 
 <template>
   <main>
-    <MarkdownFile :path="`rules/${category}/${filepath}`" />
+    <MarkdownFile
+      :path="`rules/${$route.params.category}/${$route.params.filepath}`"
+    />
   </main>
 </template>