Vue aplikace pro přístup k API č.3 – Přidáme si do Vue stránky
- Vue aplikace pro přístup k API č.1 – Instalace Vue
- Vue aplikace pro přístup k API č.2 – Připojení k našemu API
- Vue aplikace pro přístup k API č.3 – Přidáme si do Vue stránky
Zatím máme ve Vue pouze jednu stránku, ale zřejmě budeme chtít přidat další stránky.
Takže si naistalujeme vue-router npm install vue-router
upravíme si main.js , abychom přidali vue-router
|
1 2 3 4 5 6 7 8 9 10 11 |
import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') |
přidáme si adresář soubor router/index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import Login from '../views/Login.vue' import Users from '../views/Users.vue' import Products from '../views/Products.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: Home, }, { path: '/login', name: 'Login', component: Login, }, { path: '/users', name: 'Users', component: Users, }, { path: '/products', name: 'Products', component: Products, }, ], }) export default router |
a do adresáře views si přidáme jednotlivá view, např. Home.view přesunula jsem do něj volání test API
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<template> <div class="home"> <h1>Home Page</h1> <!-- Zobrazí "Loading..." když loading je true --> <div v-if="loading">Loading...</div> <!-- Zobrazí tlačítko a obsah jen když loading je false --> <div v-else> <button @click="testApi">Test API</button> <!-- zde může být váš obsah --> </div> </div> </template> <script> import api from '@/services/api' export default { name: 'Home', data() { return { loading: false, // výchozí stav je false error: null } }, methods: { async testApi() { this.loading = true // nastavíme loading na true před API voláním try { const response = await api.get('/api/test') console.log('API response:', response.data) } catch (error) { this.error = error.message } finally { this.loading = false // nastavíme loading zpět na false ať už operace uspěla nebo ne } } } } </script> |
a ostatní aspoň prozatím nějak takto
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div class="home"> <h1>Login Page</h1> </div> </template> <script> export default { name: 'Login' } </script> |
no a pokud všechno dopadlo dobře uvidíme
