Skip to content

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

O encaminhamento é o que permitirá ao utilizador navegar entre as diferentes páginas da aplicação.

A estrutura do projeto é a seguinte:

Image

13.1. Instalação das dependências

O encaminhamento 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 ficheiro [package.json] foi alterado;

13.2. O script de encaminhamento [router.js]

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


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

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

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


// as rotas da aplicação
const routes = [
  // página inicial
  { 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
  },
]

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

// exportação do router
export default router

Comentários

  • o script [router.js] irá definir as regras de encaminhamento da nossa aplicação;
  • linhas 1-6: ativação do plugin [vue-router], necessário para o encaminhamento. Esta ativação 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: importação das vistas de destino do encaminhamento;
  • linhas 15-21: definição da tabela de rotas. Cada elemento desta tabela é um objeto com as seguintes propriedades:
    • [path]: o URL da vista, aquela que queremos ver apresentada no campo [URL] do navegador. Podemos definir o que quisermos;
    • [name]: o nome da rota. Aqui também podemos colocar o que quisermos;
    • [component]: o componente que apresenta a vista. Neste caso, tem de ser obrigatoriamente um componente existente;

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

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

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'

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

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

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

Comentários

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

13.4. A vista 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 vista atual do encaminhamento -->
      <router-view />
    </b-card>
  </div>
</template>

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

Comentários

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

13.5. A formatação das vistas

A formatação das vistas é assegurada 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á utilizámos e explicámos este 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 utilizador:

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>
  • este código gera o bloco 1, composto por três ligações que permitem a navegação;
  • o atributo [to] das balizas <b-nav-item> deve corresponder a uma das propriedades [path] das rotas do router da aplicação;

13.7. As vistas

A vista n.º 1 é a seguinte:

Image

As zonas [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 vista n.º 1 utiliza o layout do componente [Layout], composto por dois slots denominados [left, right];
  • linha 4: o menu de navegação está colocado no slot da esquerda. Trata-se da área [3] que se vê acima;
  • linha 6: é colocada uma mensagem no slot da direita. Trata-se da área [4] que se vê acima;

As vistas 2 e 3 são semelhantes.

Vista n.º 2 apresentada pelo componente [Component2]:


<!-- vista 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 vista
    components: {
      Layout, Navigation
    }
  };
</script>

Vista n.º 3 apresentada pelo componente [Component3]:


<!-- vista 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 vista
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Execução do projeto

Image

Durante a execução, é apresentada a seguinte vista:

Image

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

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

Foi, portanto, o componente [Component1] que foi apresentado. Este apresenta a vista n.º 1, [2]. Agora, cliquemos na ligação [Vue 1], cujo código é o seguinte:


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

A visualização passa a ser a seguinte:

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

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

Assim, foi novamente apresentado o componente [Component1] e, consequentemente, a vista n.º 1 [4]. Agora, cliquemos 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 então assim:

Image

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

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

Foi, portanto, o componente [Component2] que foi apresentado e, consequentemente, a vista n.º 2. Se agora clicarmos na ligação [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 vista:

Image

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

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

Foi, portanto, o componente [Component3] que foi apresentado, ou seja, a vista n.º 3 [8].

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, é disponibilizado ao público sob os termos da Creative Commons Atribuição – Não comercial – Partilha igual 3.0 sem adaptações.