Skip to content

4. Exemplo [nuxt-01]: Roteamento e Navegação

Vamos construir uma série de exemplos simples para descobrir gradualmente como funciona uma aplicação [nuxt]. Começaremos por portar a aplicação [vuejs-11] do documento |Introdução ao framework VUE.JS através de exemplos|, para descobrir, em primeiro lugar, o que diferencia a organização do código de uma aplicação [nuxt] da de uma aplicação [vue].

4.1. Estrutura do diretório do projeto

O projeto [vuejs-11] era um projeto que envolvia navegação entre vistas:

Image

A estrutura de diretórios do código-fonte do projeto [vuejs-11] era a seguinte:

Image

  • [main.js] era o script executado quando a aplicação [vue] era iniciada;
  • [router.js] definia as regras de roteamento;
  • [App.vue] era a vista estruturante da aplicação. Organizava o layout das diferentes vistas;
  • [Componente1, Componente2, Componente3, Layout, Navegação] foram os componentes utilizados nas várias vistas da aplicação;

Ao portar a aplicação [Vue] [1] para uma aplicação [Nuxt] [2]:

  • os scripts executados quando a aplicação é iniciada devem ser declarados na chave [plugins] do ficheiro [nuxt.config.js]. Além disso, é possível separar os scripts destinados ao servidor [nuxt] daqueles destinados ao cliente [nuxt];
  • a vista [App.vue] deve ser colocada na pasta [layouts] e renomeada para [default.vue];
  • os componentes [Component1, Component2, Component3], que são os destinos de roteamento, devem ser movidos para a pasta [pages]. Um deles, aquele que serve como página inicial, deve ser renomeado para [index.vue]. Aqui, renomeámos os ficheiros:
    • [Component1] --> [index]: exibe o texto [Home];
    • [Component2] --> [page1]: exibe o texto [Página 1];
    • [Component3] --> [page2]: exibe o texto [Página 2];

O [nuxt] utiliza o conteúdo da pasta [pages] para gerar dinamicamente as seguintes rotas:

1
2
3
{ name :’index’, ‘path’ :’/’}
{ name :’page1’, ‘path’ :’/page1’}
{ name :’page2’, ‘path’ :’/page2’}

Como resultado, o ficheiro [router.js] utilizado no projeto [vue] torna-se desnecessário no projeto [nuxt].

O ficheiro de configuração [nuxt.config.js] ficará da seguinte forma:


export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: 'Introduction à [nuxt.js]',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ssr routing loading asyncdata middleware plugins store'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  },
  // source code directory
  srcDir: 'nuxt-01',
  // router
  router: {
    // application URL root
    base: '/nuxt-01/'
  },
  // server
  server: {
    // service port, default 3000
    port: 81,
    // network addresses listened to, default localhost: 127.0.0.1
    // 0.0.0.0 = all the machine's network addresses
    host: '0.0.0.0'
  }
}
  • linha 62: especifique a pasta que contém o código-fonte do projeto [dvp];
  • linha 66: especifique a URL raiz da aplicação [dvp] (pode introduzir o que quiser);
  • linha 43: note que a biblioteca [bootstrap-vue] é referenciada na configuração;

4.2. Portar o ficheiro [main.js]

O ficheiro [main.js] para o projeto [vuejs-11] era 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')

Além das [importações], o código faz o seguinte:

  • linhas 5–11: utiliza a biblioteca [bootstrap-vue]. Isto é agora tratado pelo módulo [bootstrap-vue/nuxt] na linha 43 do ficheiro de configuração [nuxt.config.js];
  • linhas 14 e 25: utilização do ficheiro de roteamento [router.js]. Isto é agora feito automaticamente pela aplicação [nuxt] com base na estrutura de diretórios da pasta [pages];
  • linhas 20–26: instanciação da vista principal da aplicação. Numa aplicação [nuxt], a vista [layouts/default.vue] funciona como vista principal;

O ficheiro [main.js] já não é necessário. Se fosse, teríamos de o declarar na chave [plugins] na linha 30 do ficheiro de configuração [nuxt.config.js];

4.3. A vista principal [default.vue]

Image

A vista principal [layouts/default.vue] é a seguinte:


<template>
  <div class="container">
    <b-card>
      <!-- a message -->
      <b-alert show variant="success" align="center">
        <h4>[nuxt-01] : routage et navigation</h4>
      </b-alert>
      <!-- the current routing view -->
      <nuxt />
    </b-card>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
  • Na linha 9, no projeto [vuejs-11], tínhamos a tag <router-view /> em vez da tag <nuxt /> usada aqui. Ambas parecem funcionar. Experimentei as duas sem ver qualquer alteração. Mantive a tag <nuxt />, que é a recomendada. Ela exibe a vista atual, ou seja, a página de destino da rota atual;

4.4. Os componentes

Image

Em comparação com o projeto [vuejs-11], os componentes [layout, navegação] permanecem inalterados:

[components / layout.vue]


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

Este componente é utilizado para estruturar as páginas da aplicação em duas colunas:

  • linhas 7–9: a coluna da esquerda ocupa 2 colunas do Bootstrap;
  • linhas 11–13: a coluna direita ocupa 10 colunas do Bootstrap;

[navigation.vue]


<template>
  <!-- bootstrap menu with three options -->
  <b-nav vertical>
    <b-nav-item to="/" exact exact-active-class="active">
      Home
    </b-nav-item>
    <b-nav-item to="/page1" exact exact-active-class="active">
      Page 1
    </b-nav-item>
    <b-nav-item to="/page2" exact exact-active-class="active">
      Page 2
    </b-nav-item>
  </b-nav>
</template>

Este componente apresenta três links de navegação:

Image

Para determinar quais valores atribuir aos atributos [to] nas linhas 4, 7 e 10, consulte a pasta [pages] [2]:

  • a página [index] terá o URL [/] ;
  • a página [page1] terá o URL [/page1];
  • a página [page2] terá o URL [/page2];

O componente [navigation] também pode ser escrito da seguinte forma:


<template>
  <!-- bootstrap menu with three options -->
  <b-nav vertical>
    <nuxt-link to="/" exact exact-active-class="active">
      Home
    </nuxt-link>
    <nuxt-link to="/page1" exact exact-active-class="active">
      Page 1
    </nuxt-link>
    <nuxt-link to="/page2" exact exact-active-class="active">
      Page 2
    </nuxt-link>
  </b-nav>
</template>

A tag <b-nav-item> é substituída pela tag <nuxt-link>, que denota um link de roteamento. Na prática, não notei nenhuma diferença significativa — nada que fizesse pender a balança a favor de uma tag em detrimento da outra.

4.5. As páginas

Image

A página [index.vue] apresenta a seguinte visualização:

Image

O código da página é o seguinte:


<!-- page principale -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <b-alert slot="right" show variant="warning">
      Home
    </b-alert>
  </Layout>
</template>
 
<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */
 
import Navigation from '@/components/navigation'
import Layout from '@/components/layout'
 
export default {
  name: 'Home',
  // components used
  components: {
    Layout,
    Navigation
  },
  // life cycle
  beforeCreate(...args) {
    console.log('[home beforeCreate]', 'process.server=', process.server,
 'process.client=', process.client, "nombre d'arguments=", args.length)
  },
  created(...args) {
    console.log('[home created]', 'process.server=', process.server,
 'process.client=', process.client, "nombre d'arguments=", args.length)
  },
  beforeMount(...args) {
    console.log('[home beforeMount]', 'process.server=', process.server,
 'process.client=', process.client, "nombre d'arguments=", args.length)
  },
  mounted(...args) {
    console.log('[home mounted]', 'process.server=', process.server,
 'process.client=', process.client, "nombre d'arguments=", args.length)
  }
}
</script>
  • linha 5: o componente de navegação é colocado na coluna da esquerda;
  • linhas 7–9: um alerta é colocado na coluna direita;

Na secção <script>, colocamos código nas funções do ciclo de vida da página [beforeCreate, created, beforeMount, beforeMounted]. Queremos saber quais são executadas pelo servidor []nuxt e quais pelo cliente [nuxt]. Vamos relembrar duas coisas:

  • quando uma página é solicitada — seja no arranque da aplicação (como na página [index]) ou manualmente pelo utilizador ao atualizar a página do navegador ou ao digitar um URL manualmente — ela é primeiro entregue pelo servidor [nuxt]. O servidor interpreta o código acima e executa o JavaScript que ele contém;
  • quando a página enviada pelo servidor [nuxt] chega ao navegador, chega com o código do lado do cliente [nuxt]. O código do lado do cliente, então, reexecuta o código acima;
  • Utilizamos registos para acompanhar quem está a fazer o quê, a fim de compreender melhor este processo;
  • Linhas 30–31: Utilizamos um objeto global [process] na função que existe tanto no servidor como no cliente:
    • [process.server] é verdadeiro se o código for executado pelo servidor, falso caso contrário;
    • [process.client] é verdadeiro se o código for executado pelo cliente, falso caso contrário;
    • Como a variável [process] não está declarada no código, somos obrigados a incluir a linha 14 para o [eslint]. A linha 16 é necessária porque, caso contrário, o [eslint] reporta um tipo diferente de erro devido à variável [process]. A linha 15 é necessária para permitir a utilização de [console] nas funções do ciclo de vida;
  • linha 29: também queremos saber se as funções de ciclo de vida recebem argumentos. Iremos, de facto, descobrir que [nuxt] passa informações para determinadas funções. Queremos saber se as funções de ciclo de vida estão entre elas;
  • Repetimos o mesmo código para todas as quatro funções;

4.6. O ficheiro [nuxt.config.js]

Este ficheiro controla a execução do projeto [dvp]. Foi descrito na página 33.

4.7. Executar o projeto

Executamos o projeto:

Image

A página apresentada é a seguinte:

Image

Uma vez carregada no navegador, a aplicação [nuxt] torna-se uma aplicação [vue] padrão. Por isso, não iremos abordar o comportamento do lado do cliente da aplicação [nuxt-01]. Este tema foi abordado no projeto [vuejs-11] no documento |Introdução ao Framework VUE.JS através de exemplos|.

A aplicação [nuxt] difere da aplicação [vue] em apenas dois aspetos:

  • a inicialização inicial da aplicação, que renderiza a página inicial;
  • sempre que o utilizador atualiza o navegador de qualquer forma;

Em ambos os casos:

  • a página solicitada é servida pelo servidor;
  • a página recebida é processada pelo cliente;

Vamos analisar os registos de arranque da aplicação (F12 no navegador):

Image

  • em [1], os registos do servidor (process.server=true). Aparecem precedidos da etiqueta [Nuxt SSR] (SSR = Server Side Rendered);
  • em [2], os registos do cliente no navegador (process.client=true);

A partir destes registos, podemos deduzir que:

  • o servidor executa as funções do ciclo de vida [beforeCreate, created];
  • o cliente executa as funções do ciclo de vida [beforeCreate, created, beforeMount, mounted];
  • o servidor processou a página antes do cliente;
  • em ambos os casos, nenhuma das funções executadas recebe quaisquer argumentos;

Agora, vamos analisar o código-fonte da página recebida (a opção [Código-fonte da página] no navegador):


<!doctype html>
<html data-n-head-ssr>
<head>
  <title>Introduction à [nuxt.js]</title>
  <meta data-n-head="ssr" charset="utf-8">
  <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
  <meta data-n-head="ssr" data-hid="description" name="description" content="ssr routing loading asyncdata middleware plugins store">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
  <base href="/nuxt-01/">
  ....
  <link rel="preload" href="/nuxt-01/_nuxt/runtime.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/commons.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/vendors.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/app.js" as="script">
</head>
<body>
  <div data-server-rendered="true" id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-success">
              <h4>[nuxt-01] : routage et navigation</h4>
            </div>
            <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link active nuxt-link-active">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div> <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-warning">
                    Home
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.__NUXT__ = (function (a, b, c, d, e, f, g, h, i, j) {
      return {
        layout: "default", data: [{}], error: null, serverRendered: true,
        logs: [
          { date: new Date(1574069600078), args: [a, b, c, d, e, f, g, "(repeated 1 times)"], type: h, level: i, tag: j },
          { date: new Date(1574070938091), args: [a, b, c, d, e, f, g], type: h, level: i, tag: j }
        ]
      }
    }("[home beforeCreate]", "process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0", "log", 2, ""));
  </script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/app.js" defer></script>
</body>
</html>

Comentários

  • A primeira coisa que poderá notar é que o código HTML recebido reflete com precisão o que o utilizador vê. Este não era o caso das aplicações [Vue], em que o código-fonte apresentado era o código-fonte de um ficheiro HTML quase vazio. Era isso que o navegador tinha recebido. Em seguida, o cliente [Vue] assumia o controlo e construía a página que o utilizador esperava. Tinha então de ir ao separador [Inspector] nas ferramentas de programador do navegador (F12) para ver o código HTML da página apresentada;
  • linhas 57–67: este é o script que exibia os registos marcados com [Nuxt SSR]. Estes registos eram gerados no lado do servidor e os resultados eram incorporados num script incluído na página enviada;
  • linhas 68–71: os scripts que formam o código do lado do cliente executado no navegador;

Os scripts nas linhas 68–71 são executados e transformam a página recebida. Para ver a página que é, em última análise, apresentada ao utilizador, aceda ao separador [Inspector] nas ferramentas de programador do navegador (F12):

Image

Ao expandir a tag <html> [3], vê o seguinte conteúdo:


<head>
  <title>Introduction à [nuxt.js]</title>
  <meta data-n-head="ssr" charset="utf-8">
  <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
  <meta data-n-head="ssr" data-hid="description" name="description" content="ssr routing loading asyncdata middleware plugins store">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
  <base href="/nuxt-01/">
  ...
  <link rel="preload" href="/nuxt-01/_nuxt/runtime.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/commons.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/vendors.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/app.js" as="script">
 
  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_index.js"></script>
  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_page1.js"></script>
  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_page2.js"></script>
</head>
<body>
  <div id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-success" align="center">
              <h4>[nuxt-01] : routage et navigation</h4>
            </div>
            <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link active nuxt-link-active">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-warning">
                    Home
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.__NUXT__ = (function (a, b, c, d, e, f, g, h, i) {
      return {
        layout: "default", data: [{}], error: null, serverRendered: true,
        logs: [
          { date: new Date(1574068674481), args: ["[home beforeCreate]", a, b, c, d, e, f], type: g, level: h, tag: i },
          { date: new Date(1574068674482), args: ["[home created]", a, b, c, d, e, f], type: g, level: h, tag: i }
        ]
      }
    }("process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0", "log", 2, ""));
  </script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/app.js" defer=""></script>
 
  <iframe id="mc-sidebar-container" ...></iframe>
  <iframe id="mc-topbar-container"...>  </iframe>
  <iframe id="mc-toast-container" ...></iframe>
  <iframe id="mc-download-overlay-container"...></iframe>
</body>

Comentários

  • À primeira vista, a página apresentada nas linhas 19–59 parece ser idêntica à página recebida;
  • Linhas 14–16: Aparecem três novos scripts, um para cada uma das páginas da aplicação;
  • Linhas 76–79: Aparecem quatro elementos [iframe];

Linhas 33, 37 e 42: os links são problemáticos. Parecem ser links normais que, quando clicados, enviam um pedido ao servidor. No entanto, após a execução, verificamos que não é esse o caso: nenhum pedido é enviado ao servidor. Para compreender o motivo, precisamos de voltar ao separador [Inspector] do navegador:

Image

Vemos que nos eventos [1, 2] foram associados aos links. São os scripts nas linhas 71–74 que associaram manipuladores de eventos aos links. Portanto:

  • a página apresentada pelo cliente é visualmente idêntica à enviada pelo servidor;
  • foi adicionado comportamento dinâmico à página pelo cliente;

Agora, vamos solicitar a página [page1] digitando o URL manualmente [http://192.168.1.128:81/nuxt-01/page1]. Os registos ficam da seguinte forma:

Image

Obtemos os mesmos resultados que para a página [index], mas para a [page1]. O código-fonte da página recebida é o seguinte:


<body>
  <div data-server-rendered="true" id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-success"><h4>[nuxt-01] : routage et navigation</h4></div> <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link active nuxt-link-active">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div> <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-primary">
 
                    Page 1
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>window.__NUXT__ = { layout: "default", data: [{}], error: null, serverRendered: true, logs: [{ date: new Date(1573917721122), args: ["[page1 beforeCreate]", "process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0"], type: "log", level: 2, tag: "" }] };</script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/app.js" defer></script>
</body>

Obtemos o mesmo tipo de página que a página [index], mas com o alerta de visualização [Página 1] (linha 30). Linhas 41–44: o código do lado do cliente foi enviado juntamente com a página. Em última análise, solicitar manualmente um URL é o mesmo que reiniciar a aplicação. A única diferença é que a página apresentada não é necessariamente a página inicial; é aquela que foi solicitada. Assim que a página é recebida, o cliente assume o controlo. O servidor deixará de ser contactado, a menos que o utilizador decida o contrário.

https://stahe.github.io
Este curso-tutorial escrito por Serge Tahé é disponibilizado ao público de acordo com os termos da Licença Creative Commons Atribuição – Sem uso comercial – Partilha nas mesmas condições 3.0 não adaptada.