ajout systeme de routage

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>
 

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>

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>

science-quest/src/components/erreurs/NotFound.vue

@@ -0,0 +1,3 @@
+<template>
+    404
+</template>