Skip to content

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

O roteamento é o que permitirá ao usuário navegar entre as diferentes páginas do aplicativo.

A estrutura do projeto é a seguinte:

Image

13.1. Instalação das dependências

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

Image

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

13.2. O script de roteamento [router.js]

As regras de navegação do aplicativo estão registradas no arquivo [router.js] (o nome do script pode ser qualquer um):


// importações necessárias para o roteamento
import Vue from 'vue'
import VueRouter from 'vue-router'

// plug-in de roteamento
Vue.use(VueRouter)

// os componentes de destino do roteamento
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'


// as rotas do aplicativo
const routes = [
  // página inicial
  { path: '/', name: 'home', component: Component1 },
  // Componente1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Componente2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Componente3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]

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

// exportação do roteador
export default router

Comentários

  • o script [router.js] definirá as regras de roteamento do nosso aplicativo;
  • linhas 1-6: ativação do plugin [vue-router], necessário para o roteamento. Essa ativação requer a importação da classe/função [Vue] (linha 2) e do plug-in de roteamento (linha 3). Esse plug-in foi instalado junto com a dependência [router] que acabamos de instalar;
  • linhas 8-11: importação das visualizações de destino do roteamento;
  • linhas 15-21: definição da tabela de rotas. Cada elemento dessa tabela é um objeto com as seguintes propriedades:
    • [path]: o URL da visualização, aquela que queremos ver exibida no campo [URL] do navegador. Podemos definir o que quisermos;
    • [name]: o nome da rota. Aqui também podemos inserir o que quisermos;
    • [component]: o componente que exibe a visualização. Aqui, deve ser necessariamente um componente existente;

Teremos, portanto, aqui quatro rotas [/, /vue1, /vue2, /vue3].

  • linhas 33-36: o roteador é uma instância da classe [VueRouter] importada na linha 3. O construtor de [VueRouter] é usado aqui com dois parâmetros:
    • as rotas do aplicativo;
    • um modo de gravação dos URL no navegador: o modo padrão [hash] grava os URL na forma [localhost:8080/#/vue1] (# é o hash). O modo [history] remove o # [localhost:8080/vue1];
  • linha 39: exporta-se o roteador;

13.3. O script principal [main.js]

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


// importações
import Vue from 'vue'
import App from './App.vue'

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

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

// roteador
import monRouteur from './router'

// configuração
Vue.config.productionTip = false

// instanciação do projeto [App]
new Vue({
  name: "app",
  // visualização principal
  render: h => h(App),
  // roteador
  router: monRouteur,
}).$mount('#app')

Comentários

  • linha 14: importa-se o roteador exportado pelo script [router.js];
  • linha 25: este roteador foi passado como parâmetro ao construtor da classe [Vue], que exibirá a vista principal [App], associada à propriedade [router] da vista;

13.4. A visualização principal [App]

O código da vista principal é o seguinte:


<template>
  <div class="container">
    <b-card>
      <!-- uma mensagem -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- a visualização atual do roteamento -->
      <router-view />
    </b-card>
  </div>
</template>

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

Comentários

  • linha 9: exibe a visualização atual do roteamento. A tag <router-view> só é reconhecida se a propriedade [router] da visualização tiver sido inicializada;

13.5. O layout das visualizações

O layout das visualizações é garantido pelo seguinte componente [Layout]:


<template>
  <!-- linha -->
  <div>
    <b-row>
      <!-- área com três colunas -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- área com nove colunas -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

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

Já utilizamos e explicamos esse layout no projeto [vuejs-06] do parágrafo [vuejs-06].

13.6. O componente de navegação

O componente [Navigation] oferece um menu de navegação ao usuário:

Image

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


<template>
  <!-- menu Bootstrap com três opções -->
  <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>
  • esse código gera o bloco 1, composto por três links que permitem a navegação;
  • o atributo [to] das tags <b-nav-item> deve corresponder a uma das propriedades [path] das rotas do roteador do aplicativo;

13.7. As visualizações

A visualização nº 1 é a seguinte:

Image

As áreas [3-4] são geradas pelo seguinte componente [Component1]:


<template>
  <Layout :left="true" :right="true">
    <!-- navegação -->
    <Navigation slot="left" />
    <!-- mensagem-->
    <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",
    // componentes utilizados
    components: {
      Layout, Navigation
    }
  };
</script>

Comentários

  • linha 2: a visualização nº 1 utiliza o layout do componente [Layout], composto por dois slots denominados [left, right];
  • linha 4: o menu de navegação está posicionado no slot da esquerda. Trata-se da área [3] que vemos acima;
  • linha 6: uma mensagem é colocada no slot da direita. Trata-se da área [4] que vemos acima;

As visualizações 2 e 3 são semelhantes.

Visualização nº 2 exibida pelo componente [Component2]:


<!-- visualização n.º 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navegação -->
    <Navigation slot="left" />
    <!-- mensagem -->
    <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",
    // componentes da visualização
    components: {
      Layout, Navigation
    }
  };
</script>

Visualização nº 3 exibida pelo componente [Component3]:


<!-- visão nº 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navegação -->
    <Navigation slot="left" />
    <!-- mensagem -->
    <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",
    // componentes da visualização
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Execução do projeto

Image

Ao executar, a seguinte visualização é exibida:

Image

  • em [1], o URL é [http://localhost:8080]. Assim, foi executada a seguinte regra de roteamento: 

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

Portanto, foi exibido o componente [Component1]. Ele exibe a visualização nº 1, [2]. Agora, vamos clicar no link [Vue 1], cujo código é o seguinte:


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

A exibição passa a ser a seguinte:

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

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

Portanto, foi exibido novamente o componente [Component1] e, consequentemente, a visualização nº 1, [4]. Agora, vamos clicar no link [Vue 2], cujo código é o seguinte:


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

A nova visualização fica assim:

Image

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

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

Portanto, foi exibido o componente [Component2] e, consequentemente, a visualização nº 2. Se agora clicarmos no link [Vue 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 visualização:

Image

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

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

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

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, é disponibilizado ao público de acordo com os termos da Creative Commons Atribuição – Sem uso comercial – Compartilhamento igualitário 3.0 Inalterado.