Edit routing

src/App.vue

@@ -1,8 +1,10 @@
-
 <template class="main">
-  <Header />
-  <AirportDropdown />
-  <AirportDetailsPage />
+  <div>
+    <!-- <Header /> -->
+    <router-view></router-view>
+     <AirportDropdown />
+    <!-- <AirportDetailsPage /> -->
+  </div>
 </template>
 
 
@@ -15,7 +17,7 @@
     components: {
       Header,
       AirportDropdown,
-      AirportDetailsPage,
+      AirportDetailsPage
     }
   }
 

src/components/AirportDetailsPage.vue

@@ -1,9 +1,20 @@
 
 <template>
   <div>
-    <h1>Hello</h1>
+    <h1>Hello {{ airportName }}</h1>
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    airportName: {
+      type: String,
+      required: true
+    }
+  },
+};
+</script>
+
 
 

src/components/AirportDropdown.vue

@@ -1,10 +1,40 @@
 <template>
-    <select id="airport-dropdown">
-        <option>Select an airport</option>
-        <option>Denver International Airport</option>
-        <option>Dallas Fort Worth</option>
-        <option>Los Angeles International Airport</option>
-        <option>JFK Airport</option>
-        <option>Cancun International Airport</option>
+  <div>
+    <select id="airport-dropdown" v-model="selectedAirport" @change="handleAirportChange">
+      <option disabled value="">Select an airport</option>
+      <option value="Denver International Airport">Denver International Airport</option>
+      <option value="Dallas Fort Worth">Dallas Fort Worth</option>
+      <option value="Los Angeles International Airport">Los Angeles International Airport</option>
+      <option value="JFK International Airport">JFK Airport</option>
+      <option value="Cancun International Airport">Cancun International Airport</option>
+      <!-- Add other options with their respective names -->
     </select>
-</template>
+    <button @click="search">Search</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedAirport: ''
+    };
+  },
+
+  methods: {
+    handleAirportChange() {
+      console.log('Selected Airport:', this.selectedAirport);
+    },
+
+    search() {
+      if (this.selectedAirport) {
+        this.$router.push({
+          name: 'airport-details',
+          params: { airportName: this.selectedAirport }
+        });
+      }
+    }
+  }
+};
+</script>
+

src/main.js

@@ -25,7 +25,7 @@ const router = createRouter({
 const app = createApp(App)
 
 
-// app.use(router)
+app.use(router)
 //An application instance won't render anything until its .mount() method is called. It expects a 'container' argument, which can either be an actual DOM element or a selector string. The app.mount('#app') below is connected to the html file.
 app.mount('#app')
 //The mount method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance