In questa lezione vedremo come creare componenti Vue per le rotte utilizzando Vue Router.
Scopo di questa lezione è quello di creare un piccolo sito web di esempio per capire come visualizzare le varie pagine personalizzate con contenuto e titolo.
Iniziamo con la creazione di alcuni componenti: HeaderComponent e FooterComponent.
Creare Componenti Vue con le Rotte – HeaderComponent
Partiamo dall’HeaderComponent. In questo componente ho utilizzato il componente <router-link> fornito da Vue Router per navigare tra le diverse pagine dell’applicazione.
Il componente <router-link> è un componente fornito da Vue Router che consente di creare link tra le diverse rotte dell’applicazione. È simile all’elemento <a> in HTML, ma offre funzionalità aggiuntive specifiche per la gestione delle rotte.
Poi ho inserito l’attributo to che definisce la rotta alla quale il link deve puntare. Può essere una stringa contenente il percorso della rotta o un oggetto di opzioni di navigazione. Inoltre ho aggiunto l’attributo exact che viene utilizzato quando si desidera che il link sia attivo solo quando la rotta corrente corrisponde esattamente al percorso specificato nell’attributo to. Ad esempio, exact è utilizzato nel link per la homepage (<router-link to="/" exact>) per assicurarsi che il link sia attivo solo quando la rotta corrente è esattamente /.
Infine ho inserito l’attributo active-class che specifica la classe CSS da applicare al link quando la sua rotta è attiva. In questo caso, quando un link è attivo, viene applicata la classe CSS active, che definisce uno stile visivo per evidenziare il link attivo, ad esempio rendendolo sottolineato.
<template>
<header>
<nav>
<ul>
<li>
<router-link to="/" exact active-class="active">Home</router-link>
</li>
<li>
<router-link to="/about" active-class="active">About</router-link>
</li>
<li>
<router-link to="/services" active-class="active">Services</router-link>
</li>
</ul>
</nav>
</header>
</template>
<script>
export default {
name: 'Header'
}
</script>
<style scoped>
/* Stili specifici per Header */
ul {
list-style: none;
padding: 0;
}
ul li {
display: inline;
margin-right: 20px;
}
ul li a {
text-decoration: none;
color: #333;
}
.active {
text-decoration: underline;
}
</style>
Quindi, utilizzando <router-link>, è possibile creare facilmente link tra le diverse rotte dell’applicazione Vue.js, definendo il percorso di destinazione con l’attributo to e specificando eventuali opzioni aggiuntive come exact e active-class.
Creare Componenti Vue con le Rotte – FooterComponent
Creiamo anche il footer component dove inseriamo semplicemente il copyrigth:
<template>
<footer>
<p>© 2024 - Nome Azienda</p>
</footer>
</template>
<script>
export default {
name: 'FooterComponent'
}
</script>
<style scoped>
/* Stili specifici per il Footer */
footer {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
</style>
Creare Componenti Vue con le Rotte – Creiamo le pagine
Creiamo adesso la cartella views dentro components e realizziamo tre pagine. Home, About e Services.
Iniziamo dalla pagina HomeView dove inseriamo del semplice contenuto personalizzato riguardante l’homepage:
<template>
<div>
<h1>Home Page</h1>
<p>Benvenuti sul nostro sito web!</p>
</div>
</template>
<script>
export default {
}
</script>Creiamo poi la pagina AboutView dove inseriamo anche in questo caso del semplice contenuto:
<template>
<div>
<h1>About Us</h1>
<p>Pagina della nostra storia</p>
</div>
</template>
<script>
export default {
name: 'AboutView',
}
</script>Ed infine realizziamo la pagina ServiceComponent:
<template>
<div>
<h1>Services</h1>
<p>Qui ci sono i nostri servizi.</p>
</div>
</template>
<script>
export default {
}
</script>
Creare Componenti Vue con le Rotte – router.js
Creiamo il file router.js dove innanzitutto impotiamo i moduli necessari da Vue Router e definiamo le viste. In questo passaggio, vengono importati i moduli createRouter e createWebHistory da Vue Router, insieme alle viste (componenti) HomeView, AboutView, e ServiceView.
Dopo definiamo le rotte della nostra applicazione. Ogni rotta è rappresentata da un oggetto che specifica il percorso (path), il nome (name) e il componente Vue associato (component). La proprietà meta viene utilizzata per definire i metadati aggiuntivi, come il titolo della pagina.
Poi creiamo la costante router utilizzando la funzione createRouter di Vue Router., dove specifichiamo anche l’utilizzo di createWebHistory() per la gestione dello storico di navigazione.
Infine definiamo una guardia di navigazione globale utilizzando il metodo beforeEach. Questa guardia viene eseguita prima di ogni navigazione e aggiorna il titolo del documento in base ai metadati specificati per la rotta corrente. In particolare:
(to, from, next) => { ... }: è una funzione che accetta tre argomenti:to: Rappresenta l’oggetto Route della rotta verso cui l’utente sta navigando.from: Rappresenta l’oggetto Route della rotta da cui l’utente sta navigando.next: È una funzione che deve essere chiamata per indicare al router di proseguire con la navigazione.
document.title = to.meta.title || 'Il Tuo Sito';: Questa riga imposta il titolo del documento HTML in base alla proprietàmeta.titledella rotta verso cui l’utente sta navigando. Se la proprietàmeta.titlenon è definita per la rotta, viene utilizzato il titolo predefinito'Il Tuo Sito'.next();: Questa chiamata alla funzionenext()indica al router di procedere con la navigazione. Senza questa chiamata, la navigazione si bloccherebbe e l’utente non sarebbe in grado di raggiungere la rotta desiderata.
Ecco il codice del file router.js:
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from './views/HomeView.vue';
import AboutView from './views/AboutView.vue';
import ServiceView from './views/ServiceView.vue';
const routes = [
{
path: '/',
name: 'Home',
component: HomeView,
meta: { title: 'Home - Il Mio Sito Web' }
},
{
path: '/about',
name: 'About',
component: AboutView,
meta: { title: 'About - La mia Storia' }
},
{
path: '/services',
name: 'Services',
component: ServiceView,
meta: { title: 'I Miei Servizi' }
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to, from, next) => {
document.title = to.meta.title || 'Il Tuo Sito';
next();
});
export default router;
main.js
Importiamo il router nel file main.js:
import { createApp } from 'vue'; // Importa la funzione createApp da Vue 3
import App from './App.vue';
import router from './router';
const app = createApp(App); // Crea un'istanza dell'applicazione utilizzando la funzione createApp
app.use(router); // Usa il router
app.mount('#app'); // Monta l'applicazione nell'elemento con id "app" nel DOM
Infine lavoriamo su App.vue
<template>
<div>
<HeaderComponent />
<router-view></router-view>
<FooterComponent />
</div>
</template>
<script>
import HeaderComponent from './components/HeaderComponent.vue';
import FooterComponent from './components/FooterComponent.vue';
export default {
components: {
HeaderComponent,
FooterComponent
},
}
</script>
<style>
.active {
text-decoration: none;
}
</style>
Conclusioni
In questa lezione abbiamo visto come creare Componenti Vue con le Rotte e a personalizzare anche il titolo di ciascuna pagina. Nelle prossime lezioni realizzeremo altre applicazioni utilizzando le rotte in Vue JS.
>> introduzione a Vue Router
>>
Alcuni link utili
Counter in Vue.js (con le due sintassi: Option API e Composition API)