From 4db224bc11443e6a2213c3738a96a6de0c8c692b Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Fri, 1 Mar 2024 03:27:33 -0800
Subject: [PATCH] router setup

---
 src/App.vue               | 16 ++--------------
 src/components/Navbar.vue |  7 ++++---
 src/main.ts               |  3 ++-
 src/router/index.js       | 18 ++++++++++++++++++
 src/views/fourCam.vue     | 21 +++++++++++++++++++++
 src/views/test.vue        | 14 ++++++++++++++
 6 files changed, 61 insertions(+), 18 deletions(-)
 create mode 100644 src/router/index.js
 create mode 100644 src/views/fourCam.vue
 create mode 100644 src/views/test.vue

diff --git a/src/App.vue b/src/App.vue
index ff6ccdd..9eb8283 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,26 +4,14 @@
 import Greet from "./components/Greet.vue";
 import Navbar from "./components/Navbar.vue";
 import Camera from "./components/Camera.vue";
+import { RouterView } from "vue-router";
 </script>
 
 <template>
   <div>
     <Navbar/>
   </div>
-  <div class="grid">
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-  </div>
+  <RouterView/>
   <!-- <div class="container">
     <h1>Welcome to Tauri!</h1>
     <div class="row">
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 1d896da..a8d1425 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -15,14 +15,15 @@ export default {
   }
 };
 </script>
+
 <template>
     <nav style="background-color: #011949; padding: 10px;">
       <div style="display: flex; align-items: center;">
-        <a href="#" style="text-decoration: none;">
+        <router-link to="/" style="text-decoration: none;">
           <img src="../assets/NGCP.svg" alt="" width="40" height="24">
           <span style="font-weight: bold; font-size: 1.2rem; margin-left: 10px;">NG</span>
           <span style="font-weight: bold; font-size: 1.2rem; color: white">CP</span>
-        </a>
+        </router-link>
         <div style="width: 12rem; height:4rem;border: 2px solid rgb(52, 49, 49); background-color: rgb(255, 255, 255); margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
             <div>
                 <span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 1</span>
@@ -68,7 +69,7 @@ export default {
           <!-- Insert your menu items here -->
           <li><a href="#" style="text-decoration: none;">Home</a></li>
           <li><a href="#" style="text-decoration: none;">Link</a></li>
-          <li><a href="#" style="text-decoration: none;">Disabled</a></li>
+          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
         </ul>
       </div>
     </nav>
diff --git a/src/main.ts b/src/main.ts
index 5eea099..c33641e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import "./styles.css";
 import App from "./App.vue";
+import router from "./router";
 
-createApp(App).mount("#app");
+createApp(App).use(router).mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..caa285e
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,18 @@
+import { createRouter, createWebHashHistory } from "vue-router"
+import fourCam from "../views/fourCam.vue";
+import test from "../views/test.vue";
+
+
+const routes = [
+  { path: '/', component: fourCam },
+  { path: '/test', component: test },
+]
+
+const router = createRouter({
+  // 4. Provide the history implementation to use. We
+  // are using the hash history for simplicity here.
+  history: createWebHashHistory(),
+  routes, // short for `routes: routes`
+})
+
+export default router
diff --git a/src/views/fourCam.vue b/src/views/fourCam.vue
new file mode 100644
index 0000000..f1f6782
--- /dev/null
+++ b/src/views/fourCam.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="grid">
+        <div>
+            <Camera/>
+        </div>
+        <div>
+            <Camera/>
+        </div>
+        <div>
+            <Camera/>
+        </div>
+        <div>
+            <Camera/>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/views/test.vue b/src/views/test.vue
new file mode 100644
index 0000000..df09912
--- /dev/null
+++ b/src/views/test.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+    <div class="grid">
+        <div>
+            <h1>
+                TESTESTES
+            </h1>
+        </div>
+    </div>
+</template>
\ No newline at end of file