router

package-lock.json

@@ -1908,6 +1908,11 @@
         }
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.0.0-beta.20.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz",
+      "integrity": "sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q=="
+    },
     "@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
@@ -11301,6 +11306,14 @@
         }
       }
     },
+    "vue-router": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
+      "integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.18"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -9,11 +9,13 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.15",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",

src/App.vue

@@ -1,112 +1,11 @@
 <template>
-    <div>
-        <div class="card">
-            <div class="card-header">Služby</div>
-            <div class="card-body">
-                <div class="list-group list-group-flush">
-                    <a v-on:click="aktivniSluzba = sluzba" v-for="sluzba, i in sluzby" :key="i" href="#" class="list-group-item list-group-item-action">{{ sluzba.nazev }}</a>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="aktivniSluzba" class="card">
-            <div class="card-header d-flex justify-content-between">
-                <div>Možnosti: {{ aktivniSluzba.nazev }}</div>
-                <div><button v-on:click="aktivniSluzba = null" class="btn btn-sm btn-secondary">&times;</button></div>
-            </div>
-            <div class="card-body">
-                <div v-if="aktivniSluzba.akce == 1">
-                    <p>
-                        Cena za metr čtvereční: {{ aktivniSluzba.cenaMetr }} Kč
-                    </p>
-                    <input v-model="posekaniZahrady" class="form-control" type="number" min="1" step="1">
-                    <p>
-                        Výsledná cena: {{ posekaniZahrady * aktivniSluzba.cenaMetr }} Kč
-                    </p>
-                    <p>
-                        <button v-on:click="kosikPosekaniZahrady()" class="btn btn-primary">Do košíku</button>
-                    </p>
-                </div>
-                <div v-else-if="aktivniSluzba.akce == 2">
-                    <p>
-                        Zvolte strom
-                    </p>
-                    <select v-model="strom" class="form-select">
-                        <option :value="strom" v-for="strom, i in aktivniSluzba.stromy" :key="i">
-                            {{ strom.nazev }}, {{ strom.cena }} Kč
-                        </option>
-                    </select>
-                    <input v-model="stromPocet" type="number" class="form-control" step="1" min="1">
-                    <p v-if="strom">
-                        Výsledná cena: {{ strom.cena * stromPocet }} Kč
-                    </p>
-                    <p>
-                        <button v-on:click="kosikVysaditStrom()" class="btn btn-primary">Do košíku</button>
-                    </p>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="kosik">
-            <div v-for="item, i in kosik" :key="i">
-                {{ item.nazev }} <br>
-                {{ item.polozka }} <br>
-                {{ item.cena }} Kč <br>
-            </div>
-        </div>
-    </div>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/kosik">Košík</router-link>
+  </div>
+  <router-view/>
 </template>
 
-<script>
-export default {
-    name: "App",
-    data: function () {
-        return {
-            sluzby: [
-                {
-                    nazev: "posekání zahrady",
-                    akce: 1,
-                    cenaMetr: 1.5,
-                },
-                {
-                    nazev: "vysázení stromu",
-                    akce: 2,
-                    stromy: [
-                        { nazev: "bříza", cena: 49 },
-                        { nazev: "dub", cena: 89 },
-                    ],
-                },
-                {
-                    nazev: "jezírko - čištění",
-                    akce: 3,
-                    cenaKubik: 22,
-                },
-            ],
-            aktivniSluzba: null,
-            posekaniZahrady: 1,
-            strom: null,
-            stromPocet: 1,
-            kosik: [],
-        };
-    },
-    methods: {
-        kosikPosekaniZahrady: function() {
-            this.kosik.push({
-                nazev: this.aktivniSluzba.nazev,
-                polozka: "počet metrů: " + this.posekaniZahrady,
-                cena: this.posekaniZahrady * this.aktivniSluzba.cenaMetr,
-            })
-        },
-        kosikVysaditStrom: function() {
-            this.kosik.push({
-                nazev: this.aktivniSluzba.nazev,
-                polozka: "strom: " + this.strom.nazev + ", počet: " + this.stromPocet,
-                cena: this.strom.cena * this.stromPocet,
-            })
-        },
-    },
-};
-</script>
-
 <style>
+
 </style>

src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

src/router/index.js

@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/kosik',
+    name: 'Košík',
+    // 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" */ '../views/Kosik.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

src/views/Home.vue

@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <div class="card">
+            <div class="card-header">Služby</div>
+            <div class="card-body">
+                <div class="list-group list-group-flush">
+                    <a v-on:click="aktivniSluzba = sluzba" v-for="sluzba, i in sluzby" :key="i" href="#" class="list-group-item list-group-item-action">{{ sluzba.nazev }}</a>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="aktivniSluzba" class="card">
+            <div class="card-header d-flex justify-content-between">
+                <div>Možnosti: {{ aktivniSluzba.nazev }}</div>
+                <div><button v-on:click="aktivniSluzba = null" class="btn btn-sm btn-secondary">&times;</button></div>
+            </div>
+            <div class="card-body">
+                <div v-if="aktivniSluzba.akce == 1">
+                    <p>
+                        Cena za metr čtvereční: {{ aktivniSluzba.cenaMetr }} Kč
+                    </p>
+                    <input v-model="posekaniZahrady" class="form-control" type="number" min="1" step="1">
+                    <p>
+                        Výsledná cena: {{ posekaniZahrady * aktivniSluzba.cenaMetr }} Kč
+                    </p>
+                    <p>
+                        <button v-on:click="kosikPosekaniZahrady()" class="btn btn-primary">Do košíku</button>
+                    </p>
+                </div>
+                <div v-else-if="aktivniSluzba.akce == 2">
+                    <p>
+                        Zvolte strom
+                    </p>
+                    <select v-model="strom" class="form-select">
+                        <option :value="strom" v-for="strom, i in aktivniSluzba.stromy" :key="i">
+                            {{ strom.nazev }}, {{ strom.cena }} Kč
+                        </option>
+                    </select>
+                    <input v-model="stromPocet" type="number" class="form-control" step="1" min="1">
+                    <p v-if="strom">
+                        Výsledná cena: {{ strom.cena * stromPocet }} Kč
+                    </p>
+                    <p>
+                        <button v-on:click="kosikVysaditStrom()" class="btn btn-primary">Do košíku</button>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="kosik">
+            <div v-for="item, i in kosik" :key="i">
+                {{ item.nazev }} <br>
+                {{ item.polozka }} <br>
+                {{ item.cena }} Kč <br>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Home",
+    data: function () {
+        return {
+            sluzby: [
+                {
+                    nazev: "posekání zahrady",
+                    akce: 1,
+                    cenaMetr: 1.5,
+                },
+                {
+                    nazev: "vysázení stromu",
+                    akce: 2,
+                    stromy: [
+                        { nazev: "bříza", cena: 49 },
+                        { nazev: "dub", cena: 89 },
+                    ],
+                },
+                {
+                    nazev: "jezírko - čištění",
+                    akce: 3,
+                    cenaKubik: 22,
+                },
+            ],
+            aktivniSluzba: null,
+            posekaniZahrady: 1,
+            strom: null,
+            stromPocet: 1,
+            kosik: [],
+        };
+    },
+    methods: {
+        kosikPosekaniZahrady: function() {
+            this.kosik.push({
+                nazev: this.aktivniSluzba.nazev,
+                polozka: "počet metrů: " + this.posekaniZahrady,
+                cena: this.posekaniZahrady * this.aktivniSluzba.cenaMetr,
+            })
+        },
+        kosikVysaditStrom: function() {
+            this.kosik.push({
+                nazev: this.aktivniSluzba.nazev,
+                polozka: "strom: " + this.strom.nazev + ", počet: " + this.stromPocet,
+                cena: this.strom.cena * this.stromPocet,
+            })
+        },
+    },
+};
+</script>
+
+<style>
+</style>

src/views/Kosik.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>Toto je košík</h1>
+  </div>
+</template>