router added

client/package.json

@@ -11,6 +11,7 @@
     "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
     "vuetify": "^2.6.0",
     "vuex": "3.6.2"
   },
@@ -19,6 +20,7 @@
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",

client/src/App.vue

@@ -76,7 +76,8 @@
               min-height="90vh"
               rounded="lg"
             >
-              <template v-if="activeLink === '/products'">
+            <router-view></router-view>
+              <!-- <template v-if="activeLink === '/products'">
                 <Products />
               </template>
               <template v-if="activeLink === '/customers'">
@@ -84,7 +85,7 @@
               </template>
               <template v-if="activeLink === '/users'">
 
-              </template>
+              </template> -->
             </v-sheet>
           </v-col>
         </v-row>
@@ -94,11 +95,11 @@
 </template>
 
 <script>
-import Products from './components/products';
+// import Products from './components/products';
 
   export default {
     components: {
-      Products,
+      // Products,
     },
     data: () => ({
       activeLink: '/',
@@ -115,6 +116,7 @@ import Products from './components/products';
       pushRoute(route) {
         console.log('route ', route);
         this.activeLink = route.link;
+        this.$router.push(route.link);
       },
     },
   }

client/src/main.js

@@ -2,11 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import vuetify from '@/plugins/vuetify'
 import store from './store'
+import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
   vuetify,
   store,
+  router,
   render: h => h(App)
 }).$mount('#app')

client/src/router/index.js

+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import AboutView from '../views/AboutView.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/products/:a?',
+    name: 'products',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../components/products')
+  },
+  {
+    path: '/products/:a?',
+    name: 'about',
+    component: AboutView,
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

client/src/views/AboutView.vue

+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

client/src/views/HomeView.vue

+<template>
+  <v-container grid-list-md>
+    <v-layout column wrap align-center fill-height>
+      <v-flex md12>
+        <img alt="Vue logo" src="../assets/logo.png">
+        
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'HomeView',
+  components: {
+  }
+}
+</script>

client/yarn.lock

@@ -1398,7 +1398,7 @@
     webpack "^5.54.0"
     yorkie "^2.0.0"
 
-"@vue/cli-plugin-router@^5.0.4":
+"@vue/cli-plugin-router@^5.0.4", "@vue/cli-plugin-router@~5.0.0":
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-5.0.4.tgz#d30b20125408d39c7ad19a7f8a4a82aee9e033a9"
   integrity sha512-lylzCuH3Br0BcTz5IxxSffpyoF9dQ2k4jTdK8QlWrnRanWGw7P9C0kYMr9rohHaXpvAlu6bio392gbNIWpEepg==
@@ -5691,6 +5691,11 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
+vue-router@^3.5.1:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
+  integrity sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"