13. Projekt [vuejs-11]: routing i nawigacja

Trasowanie umożliwia użytkownikowi poruszanie się między różnymi stronami aplikacji.

Struktura drzewa projektu wygląda następująco:

13.1. Instalacja zależności

Trasowanie w [Vue.js] wymaga zależności [vue-router]:

• w [1-3] instaluje się zależność [vue-router];
• w [4-6], po zainstalowaniu zależności, plik [package.json] został zmodyfikowany;

13.2. Skrypt routingu [router.js]

Reguły nawigacji aplikacji są zapisane w pliku [router.js] (nazwa skryptu może być dowolna):

// importy niezbędne do routingu
import Vue from 'vue'
import VueRouter from 'vue-router'

// wtyczka routingu
Vue.use(VueRouter)

// komponenty docelowe routingu
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'


// trasy aplikacji
const routes = [
  // strona główna
  { path: '/', name: 'home', component: Component1 },
  // Komponent1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Komponent2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Komponent3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]

// router
const router = new VueRouter({
  routes,
  mode: 'history',
})

// eksport z routera
export default router

Komentarze

• skrypt [router.js] ustali reguły routingu naszej aplikacji;
• wiersze 1–6: aktywacja wtyczki [vue-router] niezbędnej do routingu. Aktywacja ta wymaga zaimportowania klasy / funkcji [Vue] (wiersz 2) oraz wtyczki routingu (wiersz 3). Wtyczka ta została zainstalowana wraz z zależnością [router], którą właśnie zainstalowaliśmy;
• wiersze 8–11: import widoków docelowych routingu;
• wiersze 15–21: definicja tablicy tras. Każdy element tej tablicy jest obiektem o następujących właściwościach:
  • [path]: identyfikator widoku, który chcemy wyświetlić w polu [URL] przeglądarki. Można tu wpisać dowolną wartość;
  • [name]: nazwa trasy. Tutaj również można wpisać dowolną wartość;
  • [component]: komponent wyświetlający widok. W tym przypadku musi to być istniejący komponent;

Będziemy więc mieli tutaj cztery trasy o nazwie [/, /vue1, /vue2, /vue3].

• wiersze 33–36: router jest instancją klasy [VueRouter] zaimportowanej w wierszu 3. Konstruktor klasy [VueRouter] jest tutaj używany z dwoma parametrami:
  • trasy aplikacji;
  • tryb zapisywania URL w przeglądarce: tryb domyślny [hash] zapisuje URL w postaci [localhost:8080/#/vue1] (# to znak hash). Tryb [history] usuwa znak # [localhost:8080/vue1];
• wiersz 39: eksportujemy router;

13.3. Główny skrypt [main.js]

Główny skrypt [main.js] wygląda następująco:

// importy
import Vue from 'vue'
import App from './App.vue'

// wtyczki
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// router
import monRouteur from './router'

// konfiguracja
Vue.config.productionTip = false

// instancjonowanie projektu [App]
new Vue({
  name: "app",
  // widok główny
  render: h => h(App),
  // router
  router: monRouteur,
}).$mount('#aplikacja')

Komentarze

• wiersz 14: importujemy router wyeksportowany przez skrypt [router.js];
• wiersz 25: ten router został przekazany jako parametr do konstruktora klasy [Vue], który wyświetli widok główny [App], powiązany z właściwością [router] tego widoku;

13.4. Widok główny [App]

Kod widoku głównego wygląda następująco:

<template>
  <div class="container">
    <b-card>
      <!-- komunikat -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- bieżący widok routingu -->
      <router-view />
    </b-card>
  </div>
</template>

<script>
  export default {
    name: "app"
  };
</script>

Komentarze

• wiersz 9: wyświetla bieżący widok routingu. Tag <router-view> jest rozpoznawany tylko wtedy, gdy właściwość [router] widoku została zainicjowana;

13.5. Układ stron

Układ widoków zapewnia następujący komponent [Layout]:

<template>
  <!-- wiersz -->
  <div>
    <b-row>
      <!-- obszar z trzema kolumnami -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- obszar z dziewięcioma kolumnami -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
  export default {
    // parametry
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

Wykorzystaliśmy już i wyjaśniliśmy ten układ w projekcie [vuejs-06] w akapicie [vuejs-06].

13.6. Komponent nawigacyjny

Komponent [Navigation] udostępnia użytkownikowi menu nawigacyjne:

Komponent generujący blok [1] jest następujący:

<template>
  <!-- menu Bootstrap z trzema opcjami -->
  <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>

• kod ten generuje blok zawierający trzy linki umożliwiające nawigację;
• atrybut [to] tagów <b-nav-item> musi odpowiadać jednej z właściwości [path] tras routera aplikacji;

13.7. Widoki

Widok nr 1 wygląda następująco:

Obszary [3-4] są generowane przez następujący komponent [Component1]:

<template>
  <Layout :left="true" :right="true">
    <!-- nawigacja -->
    <Navigation slot="left" />
    <!-- komunikat-->
    <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",
    // użyte komponenty
    components: {
      Layout, Navigation
    }
  };
</script>

Uwagi

• wiersz 2: widok nr 1 wykorzystuje układ komponentu [Layout], składający się z dwóch slotów o nazwach [left, right];
• wiersz 4: menu nawigacyjne znajduje się w lewym slocie. Jest to obszar [3] widoczny powyżej;
• wiersz 6: w prawym slocie umieszczono komunikat. Jest to obszar [4] widoczny powyżej;

Widoki 2 i 3 są analogiczne.

Widok nr 2 wyświetlany przez komponent [Component2]:

<!-- widok nr 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- nawigacja -->
    <Navigation slot="left" />
    <!-- komunikat -->
    <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",
    // komponenty widoku
    components: {
      Layout, Navigation
    }
  };
</script>

Widok nr 3 wyświetlany przez komponent [Component3]:

<!-- widok nr 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- nawigacja -->
    <Navigation slot="left" />
    <!-- komunikat -->
    <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",
    // elementy widoku
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Realizacja projektu

Po uruchomieniu wyświetla się następujący widok:

• w [1], URL to [http://localhost:8080]. W tym momencie została wykonana następująca reguła routingu:

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

W rezultacie wyświetlono komponent [Component1]. Wyświetla on widok nr 1 [2]. Teraz kliknijmy na link [Vue 1], którego kod jest następujący:

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

Wyświetlany widok zmienia się na następujący:

• w [3] została wykonana następująca reguła routingu:

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

W związku z tym ponownie wyświetlono komponent [Component1], a tym samym widok nr 1 [4]. Teraz kliknijmy na link [Vue 2], którego kod jest następujący:

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

Nowy widok wygląda zatem następująco:

• w przypadku [5] zadziałała następująca reguła routingu:

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

W związku z tym wyświetlono komponent [Component2], a więc widok nr 2. Jeśli teraz klikniemy na link [Vue 3], którego kod wygląda następująco:

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

Otrzymujemy następujący nowy widok:

• w przypadku [6] zadziałała następująca reguła routingu:

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

Wyświetlono zatem komponent [Component3], czyli widok nr 3 [8].