13. Projeto [vuejs-11]: roteamento e navegação

O encaminhamento é o que permite aos utilizadores navegar entre as diferentes páginas da aplicação.

A estrutura de diretórios do projeto é a seguinte:

13.1. Instalação de dependências

O roteamento no [Vue.js] requer a dependência [vue-router]:

• Em [1-3], instalamos a dependência [vue-router];
• Em [4-6], após a instalação da dependência, o ficheiro [package.json] foi modificado;

13.2. O script de roteamento [router.js]

As regras de navegação da aplicação são definidas no ficheiro [router.js] (o nome do script pode ser qualquer um):

// 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

Comentários

• O script [router.js] irá definir as regras de roteamento para a nossa aplicação;
• linhas 1–6: Ativação do plugin [vue-router] necessário para o encaminhamento. Isto requer a importação da classe/função [Vue] (linha 2) e do plugin de encaminhamento (linha 3). Este plugin foi instalado com a dependência [router] que acabámos de instalar;
• linhas 8–11: importam as vistas de destino para o encaminhamento;
• linhas 15–21: definição da matriz de rotas. Cada elemento desta matriz é um objeto com as seguintes propriedades:
  • [path]: o URL da vista, aquele que queremos ver exibido no campo [URL] do navegador. Pode introduzir o que quiser;
  • [name]: o nome da rota. Aqui, também, pode introduzir o que quiser;
  • [component]: o componente que exibe a vista. Este deve ser um componente existente;

Portanto, temos aqui quatro rotas: [/], /view1, /view2, /view3.

• Linhas 33–36: O router é uma instância da classe [VueRouter] importada na linha 3. O construtor [VueRouter] é utilizado aqui com dois parâmetros:
  • as rotas da aplicação;
  • um modo para escrever URLs no navegador: o modo padrão [hash] escreve URLs na forma [localhost:8080/#/view1] (# é o hash). O modo [history] remove o # [localhost:8080/view1];
• Linha 39: Exportar o router;

13.3. O script principal [main.js]

O script principal [main.js] é o seguinte:

// 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')

Comentários

• linha 14: importamos o router exportado pelo script [router.js];
• linha 25: este router é passado como parâmetro para o construtor da classe [View], que irá apresentar a vista principal [App], associada à propriedade [router] da vista;

13.4. A vista principal [App]

O código para a vista principal é o seguinte:

<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>

Comentários

• linha 9: apresenta a vista atual no router. A tag <router-view> só é reconhecida se a propriedade [router] da vista tiver sido inicializada;

13.5. Layout da Vista

O layout da vista é tratado pelo seguinte 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>

Já utilizámos e explicámos este layout no projeto [vuejs-06], na secção [vuejs-06].

13.6. O Componente de Navegação

O componente [Navigation] fornece um menu de navegação ao utilizador:

O componente que gera o bloco [1] é o seguinte:

<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>

• Este código gera o primeiro de três links de navegação;
• o atributo [to] das tags <b-nav-item> deve corresponder a uma das propriedades [path] das rotas do router da aplicação;

13.7. As Visualizações

A Vista n.º 1 é a seguinte:

As áreas [3-4] são geradas pelo seguinte 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>

Comentários

• linha 2: a vista #1 utiliza o layout do componente [Layout], que consiste em dois slots denominados [left] e [right];
• linha 4: o menu de navegação é colocado no slot esquerdo. Esta é a área [3] mostrada acima;
• linha 6: uma mensagem é colocada no slot direito. Esta é a área [4] mostrada acima;

As vistas 2 e 3 são semelhantes.

Vista n.º 2 apresentada pelo 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 apresentada pelo 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. Executar o projeto

Após a execução, é apresentada a seguinte vista:

• em [1], o URL é [http://localhost:8080]. A seguinte regra de encaminhamento foi então executada:

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

Por conseguinte, o componente [Component1] foi apresentado. Este apresenta a vista n.º 1 [2]. Agora, vamos clicar na ligação [View 1], cujo código é o seguinte:

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

A visualização fica agora assim:

• Em [3], foi executada a seguinte regra de roteamento:

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

Assim, mais uma vez, o componente [Component1] foi exibido e, consequentemente, a Vista 1 [4]. Agora, vamos clicar no link [Vista 2], cujo código é o seguinte:

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

A nova vista fica então assim:

• em [5], foi executada a seguinte regra de roteamento:

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

Por conseguinte, foi apresentado o componente [Component2], que corresponde à Vista 2. Se clicarmos agora na ligação [Vista 3], cujo código é o seguinte:

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

Obtemos a seguinte nova vista:

• em [6], foi executada a seguinte regra de roteamento:

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

Portanto, o componente [Component3] foi exibido, ou seja, a vista n.º 3 [8].