chore: Vue Router を追加し、動作確認する

oki2a24 · Sep 1, 2021 · 0d6e904 · 0d6e904
1 parent 5a5b7c8
commit 0d6e904
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 16 deletions.
diff --git a/laravel/package-lock.json b/laravel/package-lock.json
diff --git a/laravel/package.json b/laravel/package.json
@@ -16,6 +16,7 @@
         "lodash": "^4.17.19",
         "postcss": "^8.1.14",
         "vue": "^3.2.6",
-        "vue-loader": "^16.5.0"
+        "vue-loader": "^16.5.0",
+        "vue-router": "^4.0.11"
     }
 }
diff --git a/laravel/resources/js/app.js b/laravel/resources/js/app.js
@@ -3,8 +3,20 @@ require('./bootstrap');
 import { createApp } from 'vue'
 import ExampleComponent from './components/ExampleComponent.vue'
 
+const Home = { template: "<div>Home</div>" };
+const About = { template: "<div>About</div>" };
+const routes = [
+  { path: "/", component: Home },
+  { path: "/about", component: About },
+];
+import { createRouter, createWebHistory } from "vue-router";
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
 createApp({
     components: {
         ExampleComponent
     }
-}).mount('#app')
+}).use(router).mount('#app')
diff --git a/laravel/resources/js/components/ExampleComponent.vue b/laravel/resources/js/components/ExampleComponent.vue
@@ -1,6 +1,7 @@
 <template>
     <p>ExampleComponent</p>
     <p>{{ test }}</p>
+    <router-view />
 </template>
 
 <script>