Verlinkungen korrigiert, Navbar dynamischer gemacht

src/components/Navbar.vue

@@ -1,7 +1,13 @@
 <script lang="ts">
 import RouterLink from "vue-router";
 export default {
-  name: "Navbar"
+  name: "Navbar",
+  props: {
+    links: {
+      type: Array,
+      required: true,
+    },
+  }
 };
 </script>
 <template>
@@ -44,45 +50,22 @@ export default {
             <span></span>
           </div>
         </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse" id="navbarSupportedContent" >
           <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
-            <!--<li class="nav-item">
+            <li class="nav-item" v-for="link in links">
-              <a class="nav-link link text-black display-4" href="#news-1-u6k7q0xyDG">Termine</a>
-            </li>-->
-            <li class="nav-item">
               <RouterLink
                 class="nav-link link text-black display-4"
-                to="/galerie"
+                :to="link.link"
                 aria-expanded="false"
                 >
-                Galerie
+                {{ link.title }}
               </RouterLink>
             </li>
-            <li class="nav-item">
-              <a
-                class="nav-link link text-black display-4"
-                href="#call-to-action-9-u6k7q0zosO"
-                >Umgebung</a
-              >
-            </li>
             
-            <li class="nav-item">
-              <a
-                class="nav-link link text-black display-4"
-                href="#footer-6-u6k7q0Blvk"
-                >Kontakt</a
-              >
-            </li>
-
-            <li class="nav-item">
-              <a class="nav-link link text-black display-4" href="bulitipp.php"
-                >BuLi-Tipp</a
-              >
-            </li>
           </ul>
           <div class="navbar-buttons mbr-section-btn">
-            <a class="btn btn-primary display-4" href="#about-us-12-u6k7q0yKNv"
+            <RouterLink class="btn btn-primary display-4" to="/footer"
-              >Über Ritzenbergen</a
+              >Über Ritzenbergen</RouterLink
             >
           </div>
         </div>

src/components/startseite/Bilderbuch.vue

@@ -29,56 +29,56 @@ export default {
           <div class="item features-image col-12 col-md-6 col-lg-6 active">
             <div class="item-wrapper">
               <div class="item-img">
-                <a href="./galerie.php#doppelkopf"
+                <RouterLink to="/galerie/doppelkopf"
                   ><img
                     :src="
                       RitzenbergenLib.api(
                         'randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3'
                       )
                     "
-                /></a>
+                /></RouterLink>
               </div>
             </div>
           </div>
           <div class="item features-image col-12 col-md-6 col-lg-6 active">
             <div class="item-wrapper">
               <div class="item-img">
-                <a href="./galerie.php#erntefest"
+                <RouterLink to="/galerie/erntefest"
                   ><img
                     :src="
                       RitzenbergenLib.api(
                         'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3'
                       )
                     "
-                /></a>
+                /></RouterLink>
               </div>
             </div>
           </div>
           <div class="item features-image col-12 col-md-6 col-lg-6 active">
             <div class="item-wrapper">
               <div class="item-img">
-                <a href="./galerie.php#fussballturnier"
+                <RouterLink to="/galerie/fussball"
                   ><img
                     :src="
                       RitzenbergenLib.api(
                         'randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3'
                       )
                     "
-                /></a>
+                /></RouterLink>
               </div>
             </div>
           </div>
           <div class="item features-image col-12 col-md-6 col-lg-6 active">
             <div class="item-wrapper">
               <div class="item-img">
-                <a href="./galerie.php#osterfeuer"
+                <RouterLink to="/galerie/osterfeuer"
                   ><img
                     :src="
                       RitzenbergenLib.api(
                         'randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3'
                       )
                     "
-                /></a>
+                /></RouterLink>
               </div>
             </div>
           </div>

src/router/index.ts

@@ -4,12 +4,16 @@ import Galerie from "../views/Galerie.vue";
 
 const routes = [
   { path: '/', component: () => import('../views/Main.vue') },
+  { path: '/galerie/:ev', component: Galerie },
   { path: '/galerie', component: Galerie },
   { path: '/bild/:ev/:jahr', component: () => import('../views/Bildvorschau.vue') },
   { path: '/bild/:ev/:jahr/:bild', component: () => import('../views/Bildschau.vue') },
+  { path: '/umgebung', component: () => import('../views/Main.vue') },
+  { path: '/footer', component: () => import("../views/Main.vue")}
 ]
 
 export default createRouter({
   history: createWebHashHistory(),
   routes,
+  
 });

src/views/Galerie.vue

@@ -94,6 +94,13 @@ export default {
       return result;
     },
   },
+  mounted(){
+    if(this.$route.params.ev){
+      let ev = this.$route.params.ev;
+      
+      console.log(this.$refs[ev][0].scrollIntoView());
+    }
+  }
 };
 </script>
 <template>
@@ -125,7 +132,7 @@ export default {
   <br /><br />
   <section
     class="slider4 mbr-embla cid-u6k7q0yLdW"
-    id="erntefest"
+    :ref="event.ev"
     v-for="event in events"
   >
     <div class="container-fluid">

src/views/Main.vue

@@ -36,7 +36,12 @@ export default {
 
 <template>
   <!-- Startseite -->
-  <Navbar />
+  <Navbar :links="[
+    {link: '/galerie', title: 'Galerie'},
+    {link: '/umgebung', title: 'Umgebung'},
+    {link: '/footer', title: 'Kontakt'},
+    {link: '/', title: 'BuLi-Tipp'},
+  ]"/>
   <Willkommen/>
   
   
@@ -60,7 +65,16 @@ export default {
             RitzenbergenLib.api('randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=5'),
             RitzenbergenLib.api('randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=5'),
             'http://ritzenbergen.de/Fotos/hauptfoto.jpg'
-          ]" />
+          ]"
+
+          :links='[
+            "/galerie/erntefest",
+            "/galerie/osterfeuer",
+            "/galerie/doppelkopf",
+            "/galerie/fussball",
+            ""
+          ]'
+          />
         </div>
       </div>
     </div>