Skip to content

4. [nuxt-01] örneği: yönlendirme ve gezinme

Bir [nuxt] uygulamasının işleyişini aşamalı olarak keşfetmek için bir dizi basit örnek oluşturacağız. Öncelikle |Introduction au framework VUE.JS par l’exemple| belgesindeki [vuejs-11] uygulamasını taşıyarak başlayacağız, böylece öncelikle bir [nuxt] uygulamasının kod yapısının, bir [vue] uygulamasının kod yapısından ne farkı olduğunu anlayacağız.

4.1. Proje ağacı

[vuejs-11] projesi, görünümler arasında gezinmeye yönelik bir projeydi:

Image

[vuejs-11] projesinin kaynak kod ağacı şu şekildeydi:

Image

  • [main.js], [vue] uygulamasının başlatılması sırasında yürütülen komut dosyasıydı;
  • [router.js], yönlendirme kurallarını belirliyordu;
  • [App.vue], uygulamanın yapısını belirleyen görünümdü. Farklı görünümlerin sayfa düzenini organize ediyordu;
  • [Component1, Component2, Component3, Layout, Navigation], uygulamanın farklı görünümlerinde kullanılan bileşenlerdi;

[vue] [1] uygulamasının [nuxt] [2] uygulamasına taşınmasında:

  • uygulamanın başlatılması sırasında yürütülen komut dosyaları, [nuxt.config.js] dosyasının [plugins] anahtarında tanımlanmalıdır. Ayrıca, [nuxt] sunucusu için olan komut dosyalarını [nuxt] istemcisi için olanlardan ayırmak mümkündür;
  • [App.vue] görünümü, [layouts] klasörüne kurulmalı ve adı [default.vue] olarak değiştirilmelidir;
  • yönlendirme hedefleri olan [Component1, Component2, Component3] bileşenleri, [pages] klasörüne taşınmalıdır. Bunlardan biri, ana sayfa olarak kullanılan dosya, [index.vue] olarak yeniden adlandırılmalıdır. Burada dosyaları şu şekilde yeniden adlandırdık:
    • [Component1] --> [index]: [Home] metnini görüntüler;
    • [Component2] --> [page1]: [Page 1] metnini görüntüler;
    • [Component3] --> [page2]: [Page 2] metnini görüntüler;

[nuxt], [pages] klasörünün içeriğini kullanarak aşağıdaki rotaları dinamik olarak oluşturur:

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

Bu nedenle, [vue] projesinde kullanılan [router.js] dosyası, [nuxt] projesinde gereksiz hale gelir.

[nuxt.config.js] yapılandırma dosyası şu şekilde olacaktır:


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: [
    // Belge: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Belge: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Belge: 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) {}
  },
  // kaynak kod dizini
  srcDir: 'nuxt-01',
  // yönlendirici
  router: {
    // uygulamanın URL kökü
    base: '/nuxt-01/'
  },
  // sunucu
  server: {
    // hizmet bağlantı noktası, varsayılan olarak 3000
    port: 81,
    // dinlenen ağ adresleri, varsayılan olarak localhost: 127.0.0.1
    // 0.0.0.0 = makinedeki tüm ağ adresleri
    host: '0.0.0.0'
  }
}
  • 62. satır: [dvp] projesinin kaynak kodunu içeren klasör belirtilir;
  • 66. satır: [dvp] uygulamasının kök dizini belirtilir (buraya istenilen değer girilebilir);
  • satır 43: [bootstrap-vue] kütüphanesinin yapılandırmada referanslandığını not edelim;

4.2. [main.js] dosyasının taşınması

[vuejs-11] projesine ait [main.js] dosyası şu şekildeydi:


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

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

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

// yönlendirici
import monRouteur from './router'

// yapılandırma
Vue.config.productionTip = false

// proje örneği [App]
new Vue({
  name: "app",
  // ana görünüm
  render: h => h(App),
  // yönlendirici
  router: monRouteur,
}).$mount('#uygulama')

[imports] dışında, kod şu işlemleri gerçekleştirir:

  • 5-11. satırlar: [bootstrap-vue] kütüphanesinin kullanımı. Bu iş artık [nuxt.config.js] yapılandırma dosyasının 43. satırındaki [bootstrap-vue/nuxt] modülü tarafından gerçekleştirilmektedir;
  • 14. ve 25. satırlar: [router.js] yönlendirme dosyasının kullanımı. Bu iş artık [pages] klasör ağacından [nuxt] uygulaması tarafından otomatik olarak gerçekleştirilmektedir;
  • 20-26. satırlar: Uygulamanın ana görünümünün oluşturulması. Bir [nuxt] uygulamasında, ana görünüm olarak [layouts/default.vue] görünümü kullanılır;

[main.js] dosyasının artık varlık nedeni kalmamıştır. Eğer bir varlık nedeni olsaydı, bu durum [nuxt.config.js] yapılandırma dosyasının 30. satırındaki [plugins] anahtarında belirtilirdi;

4.3. Ana görünüm [default.vue]

Image

[layouts / default.vue] ana görünümü şu şekildedir:


<template>
  <div class="container">
    <b-card>
      <!-- bir mesaj -->
      <b-alert show variant="success" align="center">
        <h4>[nuxt-01] : routage et navigation</h4>
      </b-alert>
      <!-- yönlendirmenin geçerli görünümü -->
      <nuxt />
    </b-card>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
  • [vuejs-11] projesinin 9. satırında, burada kullanılan <nuxt /> etiketinin yerine <router-view /> etiketi vardı. Her ikisi de kullanılabilir görünüyor. İkisini de denedim ancak herhangi bir değişiklik görmedim. Önerilen <nuxt /> etiketini kullandım. Bu etiket, mevcut görünümü, yani mevcut yönlendirmenin hedef sayfasını görüntüler;

4.4. Bileşenler

Image

[vuejs-11] projesine kıyasla, [layout, navigation] bileşenlerinde herhangi bir değişiklik yok:

[components / layout.vue]


<!-- görünüm düzeni -->
<template>
  <!-- satır -->
  <div>
    <b-row>
      <!-- iki sütunlu alan -->
      <b-col v-if="left" cols="2">
        <slot name="left" />
      </b-col>
      <!-- on sütunlu alan -->
      <b-col v-if="right" cols="10">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

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

Bu bileşen, uygulamanın sayfalarını iki sütuna ayırmak için kullanılır:

  • 7-9. satırlar: sol sütun, 2 Bootstrap sütun genişliğinde;
  • 11-13. satırlar: sağ sütun, 10 Bootstrap sütununa yayılır;

[navigation.vue]


<template>
  <!-- üç seçenekli Bootstrap menüsü -->
  <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>

Bu bileşen üç gezinme bağlantısı görüntüler:

Image

4., 7. ve 10. satırlardaki [to] özniteliklerine ne tür bir değer gireceğinizi öğrenmek için [pages] [2] klasörüne bakmanız gerekir:

  • [index] sayfası, URL ve [/]’e sahip olacaktır;
  • [page1] sayfası, URL ve [/page1] sayfalarını içerecektir;
  • [page2] sayfası, URL ve [/page2]'e sahip olacaktır;

[navigation] bileşeni şu şekilde de yazılabilir:


<template>
  <!-- üç seçenekli Bootstrap menüsü -->
  <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>

<b-nav-item> etiketi, bir yönlendirme bağlantısını belirten <nuxt-link> etiketiyle değiştirilmiştir. Uygulamada, bir etiketi diğerine tercih etmemi gerektirecek kadar büyük bir fark görmedim.

4.5. Sayfalar

Image

[index.vue] sayfası şu görünümü sergiliyor:

Image

Sayfanın kodu şöyledir:


<!-- ana sayfa -->
<template>
  <Layout :left="true" :right="true">
    <!-- gezinme -->
    <Navigation slot="left" />
    <!-- mesaj-->
    <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',
  // kullanılan bileşenler
  components: {
    Layout,
    Navigation
  },
  // yaşam döngüsü
  beforeCreate(...args) {
    console.log('[home beforeCreate]', 'process.server=', process.server,
'process.client=', process.client, "argüman sayısı=", args.length)
  },
  created(...args) {
    console.log('[home created]', 'process.server=', process.server,
'process.client=', process.client, "argüman sayısı=", args.length)
  },
  beforeMount(...args) {
    console.log('[home beforeMount]', 'process.server=', process.server,
'process.client=', process.client, "argüman sayısı=", args.length)
  },
  mounted(...args) {
    console.log('[home mounted]', 'process.server=', process.server,
'process.client=', process.client, "argüman sayısı=", args.length)
  }
}
</script>
  • 5. satır: gezinme bileşeni sol sütuna yerleştirilmiştir;
  • 7-9. satırlar: sağ sütuna bir uyarı yerleştirilmiştir;

<script> bölümünde, [beforeCreate, created, beforeMount, beforeMounted] sayfasının yaşam döngüsü işlevlerine kod ekliyoruz. Hangi işlevlerin []nuxt sunucusu tarafından, hangilerinin ise [nuxt] istemcisi tarafından yürütüldüğünü bilmek istiyoruz. İki hususu hatırlatmak isteriz:

  • bir sayfa, ya uygulamanın başlatılması sırasında, [index] sayfası örneğinde olduğu gibi, ya da kullanıcı tarafından tarayıcı sayfasını yenilemek veya URL adresini elle girmek suretiyle manuel olarak talep edildiğinde, sayfa ilk olarak [nuxt] sunucusu tarafından sunulur. Sunucu, yukarıdaki kodu yorumlar ve içindeki JavaScript kodunu çalıştırır;
  • [nuxt] sunucusu tarafından gönderilen sayfa tarayıcıya ulaştığında, [nuxt] istemci koduyla birlikte gelir. Bu istemci, yukarıdaki sayfayı yeniden yorumlar;
  • günlük kayıtları sayesinde, bu süreci daha iyi anlamak için kimin ne yaptığını bilmek istiyoruz;
  • 30-31. satırlar: işlevde, hem sunucuda hem de istemcide bulunan [process] adlı bir küresel nesne kullanılır:
    • [process.server], kod sunucu tarafından yürütülürse doğru, aksi takdirde yanlıştır;
    • [process.client], kod istemci tarafından çalıştırılırsa doğru, aksi takdirde yanlıştır;
    • [process] değişkeni kodda tanımlanmadığı için, [eslint] için 14. satırı eklemek zorundayız. [16] satırı gereklidir; aksi takdirde [eslint], [process] değişkeni nedeniyle başka bir hata türü bildirir. 15. satır ise [console]'in yaşam döngüsü işlevlerinde kullanılabilmesi için gereklidir;
  • 29. satır: yaşam döngüsü işlevlerinin argüman alıp almadığını da öğrenmek istiyoruz. Aslında [nuxt]'in belirli işlevlere bilgi ilettiğini göreceğiz. Yaşam döngüsü işlevlerinin de bunların arasında olup olmadığını öğrenmek istiyoruz;
  • Aynı kodu dört işlev için de tekrarlıyoruz;

4.6. [nuxt.config.js] dosyası

[dvp] projesinin yürütülmesini kontrol eden dosya budur. Bu dosya 33. sayfada açıklanmıştır.

4.7. Projenin Yürütülmesi

Projeyi çalıştırıyoruz:

Image

Görüntülenen sayfa şöyledir:

Image

Tarayıcıya yüklendikten sonra, [nuxt] uygulaması klasik bir [vue] uygulaması haline gelir. Bu nedenle, [nuxt-01] uygulamasının istemci tarafındaki işleyişi hakkında yorum yapmayacağız. Bu konu, |Introduction au framework VUE.JS par l’exemple| belgesindeki [vuejs-11] projesinde ele alınmıştır.

[nuxt] uygulaması, [vue] uygulamasından yalnızca iki noktada farklılık gösterir:

  • uygulamanın ilk başlatılması sırasında ana sayfa görüntülenir;
  • kullanıcı herhangi bir şekilde tarayıcının yenilenmesini tetiklediği her seferinde;

Bu iki durumda da:

  • istenen sayfa sunucu tarafından sağlanır;
  • alınan sayfa istemci tarafından işlenir;

Uygulamanın başlatma günlüklerine (tarayıcıda F12) bir göz atalım:

Image

  • [1]'te, sunucu günlükleri (process.server=true). Bunların başında [Nuxt SSR] ibaresi yer alır (SSR= Sunucu Tarafında İşlenmiş);
  • [2] olarak, tarayıcıdaki istemci günlükleri (process.client=true);

Bu günlüklerden şu sonuçlar çıkarılabilir:

  • sunucu, yaşam döngüsünün [beforeCreate, created] işlevlerini yürütür;
  • istemci, yaşam döngüsünün [beforeCreate, created, beforeMount, mounted] işlevlerini yürütür;
  • sunucu, sayfayı istemciden önce işlemiştir;
  • her iki durumda da, yürütülen işlevlerin hiçbirine argüman verilmemiştir;

Şimdi alınan sayfanın kaynak koduna bakalım (tarayıcıdaki [Code source de la page] seçeneği):


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

Yorumlar

  • İlk dikkat çeken şey, alınan HTML kodunun kullanıcının gördüklerini doğru bir şekilde yansıtmasıdır. [vue] uygulamalarında durum böyle değildi; bu uygulamalarda görüntülenen kaynak kodu, neredeyse boş bir HTML dosyasının kaynak koduydu. Tarayıcıya gelen de buydu. Ardından [vue] istemcisi devreye girerek kullanıcının beklediği sayfayı oluşturuyordu. Bu durumda, görüntülenen sayfanın kodunu görmek için tarayıcının geliştirici araçlar sekmesindeki (F12) [inspecteur] sekmesine gitmek gerekiyordu;
  • 57-67. satırlar: [Nuxt SSR] etiketli günlükleri görüntüleyen komut dosyasıdır. Bu günlükler sunucu tarafında üretilmiş ve sonuçlar gönderilen sayfaya dahil edilen bir komut dosyasına yerleştirilmiştir;
  • 68-71. satırlar: tarayıcı tarafında çalıştırılan istemciyi oluşturan komut dosyaları;

68-71. satırlardaki komut dosyaları çalıştırılır ve alınan sayfayı dönüştürür. Kullanıcıya nihayetinde görüntülenen sayfayı öğrenmek için, tarayıcının geliştirici araçlarındaki (F12) [inspecteur] sekmesine gitmek gerekir:

Image

<html> [3] etiketini genişlettiğinizde şu içerik karşınıza çıkar:


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

Yorumlar

  • İlk bakışta, 19-59. satırlarda görüntülenen sayfa, alınan sayfayla aynı gibi görünüyor;
  • 14-16. satırlar: Uygulamanın her bir sayfası için birer tane olmak üzere üç yeni komut dosyası ortaya çıkıyor;
  • 76-79. satırlar: dört adet [iframe] görünüyor;

33, 37 ve 42. satırlarda bağlantılar sorun yaratıyor. Bunlar, tıklandığında sunucuya bir istek gönderecek gibi görünen normal bağlantılar gibi görünüyor. Ancak çalıştırıldığında bunun doğru olmadığı anlaşılıyor: sunucuya herhangi bir istek gönderilmiyor. Bunun nedenini anlamak için tarayıcının [inspecteur] sekmesine geri dönmek gerekir:

Image

[1, 2]'te bağlantılara olaylar eklenmiş olduğunu görüyoruz. Bağlantılara olay işleyicileri ekleyen, 71-74. satırlardaki komut dosyalarıdır. Dolayısıyla:

  • istemci tarafından görüntülenen sayfa, sunucu tarafından gönderilen sayfayla görsel olarak aynıdır;
  • sayfaya istemci tarafından dinamik bir davranış eklenmiştir;

Şimdi, URL adresini elle [http://192.168.1.128:81/nuxt-01/page1] olarak yazarak [page1] sayfasını isteyelim. Günlükler şu şekilde olur:

Image

[index] sayfası için elde edilen sonuçların aynısı, [page1] sayfası için de elde edilir. Alınan sayfanın kaynak kodu ise şöyledir:


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

[index] sayfasıyla aynı türde bir sayfa elde edilir, ancak [Page 1] görünümüne ait uyarı (30. satır) görüntülenir. 41-44. satırlarda, istemci kodu sayfa ile birlikte geri gönderilmiştir. Sonuç olarak, URL sayfasını manuel olarak istemek, uygulamayı yeniden başlatmakla aynıdır. Tek fark, görüntülenen sayfanın mutlaka ana sayfa olması gerekmemesi; istenen sayfanın görüntülenmesi söz konusudur. Sayfa alındıktan sonra kontrolü istemci devralır. Kullanıcı aksi yönde bir karar vermedikçe sunucuya artık başvurulmaz.

https://stahe.github.io
Serge Tahé tarafından yazılan bu kurs-eğitim kılavuzu, Creative Commons Atıf – Ticari Olmayan Kullanım – Aynı Lisansla Paylaş 3.0 Değiştirilmeden lisansının koşullarına göre kamuoyuna sunulmaktadır.