From a4f55197cc68294b53a095b41000f1d00f8426b6 Mon Sep 17 00:00:00 2001
From: gwen <a>
Date: Mon, 26 Feb 2024 15:51:07 +0100
Subject: [PATCH] ajout systeme de routage

---
 science-quest/src/App.vue                     | 32 +++++++++++++++++--
 .../src/components/PagePrincipale.vue         | 16 ++++++++++
 science-quest/src/components/Titre.vue        |  4 +--
 .../src/components/erreurs/NotFound.vue       |  3 ++
 4 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 science-quest/src/components/PagePrincipale.vue
 create mode 100644 science-quest/src/components/erreurs/NotFound.vue

diff --git a/science-quest/src/App.vue b/science-quest/src/App.vue
index 6d0aef1..a702626 100644
--- a/science-quest/src/App.vue
+++ b/science-quest/src/App.vue
@@ -1,6 +1,33 @@
-<script setup>
-import Titre from './components/Titre.vue';
+<script>
+import PagePrincipale from './components/PagePrincipale.vue';
+import Titre from './components/Titre.vue'
+import NotFound from './components/erreurs/NotFound.vue';
 
+
+
+const routes = {
+  '/': PagePrincipale,
+  '/about': PagePrincipale
+}
+
+export default {
+    data() {
+        return {
+            currentPath: window.location.hash
+        };
+    },
+    computed: {
+        currentView() {
+            return routes[this.currentPath.slice(1) || '/'] || NotFound;
+        }
+    },
+    mounted() {
+        window.addEventListener('hashchange', () => {
+            this.currentPath = window.location.hash;
+        });
+    },
+    components: { Titre }
+}
 </script>
 
 <template>
@@ -9,6 +36,7 @@ import Titre from './components/Titre.vue';
 
   <main>
     <!-- todo -->
+    <component :is="currentView" />
   </main>
 </template>
 
diff --git a/science-quest/src/components/PagePrincipale.vue b/science-quest/src/components/PagePrincipale.vue
new file mode 100644
index 0000000..3af9d0c
--- /dev/null
+++ b/science-quest/src/components/PagePrincipale.vue
@@ -0,0 +1,16 @@
+<script>
+import { NOM_APP } from "../assets/const";
+
+export default{
+    data(){
+        return{
+            nomApp:NOM_APP
+        }
+    }
+}
+
+</script>
+
+<template>
+    <p>Bienvenue dans {{ nomApp }} !! &lt;3</p>
+</template>
\ No newline at end of file
diff --git a/science-quest/src/components/Titre.vue b/science-quest/src/components/Titre.vue
index b7698ee..038084b 100644
--- a/science-quest/src/components/Titre.vue
+++ b/science-quest/src/components/Titre.vue
@@ -28,8 +28,8 @@ export default{
         <!-- liste de trucs a cliquer; accueil, jouer, langues?-->
         <nav>
             <!-- todo : component pour faire type de bouton (normal, menu déroulant)-->
-            <a>Accueil</a>
-            <a>Jouer</a>
+            <a href="#/">Accueil</a>
+            <a href="#/jouer">Jouer</a>
         </nav>
     </header>
 </template>
diff --git a/science-quest/src/components/erreurs/NotFound.vue b/science-quest/src/components/erreurs/NotFound.vue
new file mode 100644
index 0000000..1af96e2
--- /dev/null
+++ b/science-quest/src/components/erreurs/NotFound.vue
@@ -0,0 +1,3 @@
+<template>
+    404
+</template>
\ No newline at end of file