13. Progetto [vuejs-11]: routing e navigazione

Il routing è ciò che permette agli utenti di navigare tra le diverse pagine dell'applicazione.

La struttura delle directory del progetto è la seguente:

13.1. Installazione delle dipendenze

Il routing in [Vue.js] richiede la dipendenza [vue-router]:

• Nei passaggi [1-3], installiamo la dipendenza [vue-router];
• Nei passaggi [4-6], dopo aver installato la dipendenza, il file [package.json] è stato modificato;

13.2. Lo script di routing [router.js]

Le regole di navigazione dell'applicazione sono definite nel file [router.js] (il nome dello script può essere qualsiasi cosa):

// imports nécessaires au routage
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// plugin de routage
Vue.use(VueRouter)
 
// les composants cibles du routage
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'
 
 
// les routes de l'application
const routes = [
  // home
  { path: '/', name: 'home', component: Component1 },
  // Component1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Component2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Component3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]
 
// le routeur
const router = new VueRouter({
  routes,
  mode: 'history',
})
 
// export du routeur
export default router

Commenti

• Lo script [router.js] definirà le regole di routing per la nostra applicazione;
• righe 1–6: Abilitazione del plugin [vue-router] necessario per il routing. Ciò richiede l'importazione della classe/funzione [Vue] (riga 2) e del plugin di routing (riga 3). Questo plugin è stato installato con la dipendenza [router] che abbiamo appena installato;
• righe 8–11: importazione delle viste di destinazione per il routing;
• righe 15–21: definizione dell'array delle rotte. Ogni elemento di questo array è un oggetto con le seguenti proprietà:
  • [path]: l'URL della vista, quello che vogliamo vedere visualizzato nel campo [URL] del browser. Sei libero di inserire quello che vuoi;
  • [name]: il nome del percorso. Anche qui puoi inserire quello che vuoi;
  • [component]: il componente che visualizza la vista. Deve trattarsi di un componente esistente;

Quindi qui abbiamo quattro route: [/], /view1, /view2, /view3.

• Righe 33–36: Il router è un'istanza della classe [VueRouter] importata alla riga 3. Il costruttore [VueRouter] viene utilizzato qui con due parametri:
  • i percorsi dell'applicazione;
  • una modalità per la scrittura degli URL nel browser: la modalità predefinita [hash] scrive gli URL nella forma [localhost:8080/#/view1] (# è l'hash). La modalità [history] rimuove il # [localhost:8080/view1];
• Riga 39: Esporta il router;

13.3. Lo script principale [main.js]

Lo script principale [main.js] è il seguente:

// imports
import Vue from 'vue'
import App from './App.vue'
 
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
 
// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
// routeur
import monRouteur from './router'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  name: "app",
  // vue principale
  render: h => h(App),
  // routeur
  router: monRouteur,
}).$mount('#app')

Commenti

• riga 14: importiamo il router esportato dallo script [router.js];
• riga 25: questo router viene passato come parametro al costruttore della classe [View], che visualizzerà la vista principale [App], associata alla proprietà [router] della vista;

13.4. La vista principale [App]

Il codice della vista principale è il seguente:

<template>
  <div class="container">
    <b-card>
      <!-- a message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- the current routing view -->
      <router-view />
    </b-card>
  </div>
</template>
 
<script>
  export default {
    name: "app"
  };
</script>

Commenti

• riga 9: visualizza la vista corrente nel router. Il tag <router-view> viene riconosciuto solo se la proprietà [router] della vista è stata inizializzata;

13.5. Layout della vista

Il layout della vista è gestito dal seguente componente [Layout]:

<template>
  <!-- line -->
  <div>
    <b-row>
      <!-- three-column zone -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- nine-column zone -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>
 
<script>
  export default {
    // paramètres
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

Abbiamo già utilizzato e spiegato questo layout nel progetto [vuejs-06] nella sezione [vuejs-06].

13.6. Il componente di navigazione

Il componente [Navigation] fornisce un menu di navigazione all'utente:

Il componente che genera il blocco [1] è il seguente:

<template>
  <!-- bootstrap menu with three options -->
  <b-nav vertical>
    <b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>
    <b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>
    <b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>
  </b-nav>
</template>

• Questo codice genera il primo dei tre link di navigazione;
• l'attributo [to] dei tag <b-nav-item> deve corrispondere a una delle proprietà [path] delle rotte del router dell'applicazione;

13.7. Le viste

La vista n. 1 è la seguente:

Le aree [3-4] sono generate dal seguente componente [Component1]:

<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <b-alert show variant="primary" slot="right">Vue 1</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from './Navigation';
  import Layout from './Layout';
 
  export default {
    name: "component1",
    // composants utilisés
    components: {
      Layout, Navigation
    }
  };
</script>

Commenti

• riga 2: la vista n. 1 utilizza il layout del componente [Layout], che consiste in due slot denominati [left] e [right];
• riga 4: il menu di navigazione è posizionato nello slot sinistro. Si tratta dell'area [3] mostrata sopra;
• riga 6: un messaggio è posizionato nello slot destro. Si tratta dell'area [4] mostrata sopra;

Le viste 2 e 3 sono simili.

Vista n. 2 visualizzata dal componente [Component2]:

<!-- vue n° 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <b-alert show variant="secondary" slot="right">Vue 2</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from './Navigation';
  import Layout from './Layout';
 
  export default {
    name: "component2",
    // composants de la vue
    components: {
      Layout, Navigation
    }
  };
</script>

Vista n. 3 visualizzata dal componente [Component3]:

<!-- vue n° 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <b-alert show variant="info" slot="right">Vue 3</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from "./Navigation";
  import Layout from "./Layout";
 
  export default {
    name: "component3",
    // composants de la vue
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Esecuzione del progetto

All'esecuzione, viene visualizzata la seguente schermata:

• in [1], l'URL è [http://localhost:8080]. È stata quindi eseguita la seguente regola di routing:

{ path: '/', name: 'home', component: Component1 }

Pertanto, è stato visualizzato il componente [Component1]. Esso mostra la vista n. 1 [2]. Ora clicchiamo sul link [View 1], il cui codice è il seguente:

<b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>

La visualizzazione ora appare così:

• In [3] è stata eseguita la seguente regola di routing:

path: '/vue1', name: 'vue1', component: Component1

Quindi, ancora una volta, è stato visualizzato il componente [Component1] e, di conseguenza, la Vista 1 [4]. Ora clicchiamo sul link [View 2], il cui codice è il seguente:

<b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>

La nuova vista è quindi la seguente:

• in [5], è stata eseguita la seguente regola di routing:

path: '/vue2', name: 'vue2', component: Component2

Pertanto, è stato visualizzato il componente [Component2], che corrisponde alla Vista 2. Se ora clicchiamo sul link [Vista 3], il cui codice è il seguente:

<b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>

Otteniamo la seguente nuova vista:

• in [6], è stata eseguita la seguente regola di routing:

path: '/vue3', name: 'vue3', component: Component3

Pertanto, è stato visualizzato il componente [Component3], ovvero la vista n. 3 [8].