Skip to content

11. [nuxt-08] örneği: yönlendirme ara yazılımları

Bu örnekte, her rota değişikliğinde çalıştırılan komut dosyaları olan yönlendirme ara yazılımları kavramını tanıtıyoruz.

[nuxt-08] örneği, başlangıçta [nuxt-01] projesinin kopyalanmasıyla elde edilir:

Image

Yönlendirme ara yazılımları, [middleware] [2] adlı bir klasörde bulunmalıdır. İki aşamalı bir yönlendirme olabilir:

  • her gezinme işlemine uygulanan bir yönlendirme. Bu yönlendirme, [nuxt.config.js] dosyasında tanımlanır;
  • yönlendirmenin hedefi olan belirli bir sayfaya uygulanan yönlendirme. Bu yönlendirme, hedef sayfada tanımlanır;

11.1. Genel yönlendirme

[middleware / routing.js] dosyası genel yönlendirmeyi sağlayacaktır. Bu dosya, [nuxt.config.js] dosyasında aşağıdaki şekilde tanımlanmıştır:


  router: {
    base: '/nuxt-08/',
    middleware: ['routing']
},

Genel yönlendirme ara yazılımları, yönlendiricinin bir özelliğidir (1. satır). Birden fazla yönlendirme ara yazılımı olabilir. Bu nedenle 3. satırda, [middleware] özelliğinin değeri bir dizidir. Görüldüğü gibi, orta katmanı belirtmek için bir yol kullanılmamaktadır. Orta katman, projenin [middleware] klasöründe otomatik olarak aranacaktır;

[routing] orta katmanı burada sadece günlük kaydı tutar:


/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function(...args) {
  // bu kodu kim çalıştırıyor?
  console.log('[routing], process.server=', process.server, 'process.client=', process.client)
  const who = process.server ? 'server' : 'client'
  const routing = '[routing ' + who + ']'
  // argüman sayısı
  console.log(routing + ', il y a', args.length, 'argument(s)')

  // 1. argüman
  const context = args[0]
  // bağlam anahtarları
  dumpkeys(routing + ', context', context)
  // uygulama
  dumpkeys(routing + ', context.app', context.app)
  // yol
  dumpkeys(routing + ', context.route', context.route)
  console.log(routing + ', context.route=', context.route)
  // yönlendirici
  dumpkeys(routing + ', context.app.router', context.app.router)
  // router.options.routes
  dumpkeys(routing + ', context.app.router.options.routes', context.app.router.options.routes)
  console.log(routing + ', context.app.router.options.routes=', context.app.router.options.routes)
}

function dumpkeys(message, object) {
  // [object] anahtar listesi
  const ligne = 'Liste des clés [' + message + ']'
  console.log(ligne)
  // anahtar listesi
  if (object) {
    console.log(Object.keys(object))
  }
}
  • 3. satır: Middleware'in bir argüman aldığını göreceğiz: yürütücünün bağlamı (sunucu veya istemci);
  • 4-25. satırlar: Neyin kullanılabilir olduğunu öğrenmek için farklı nesnelerin özelliklerini görüntülüyoruz. Middleware'in bağlamının eklentinin bağlamıyla neredeyse aynı olduğunu göreceğiz;

11.2. Belirli bir sayfa için yönlendirme

[index] sayfasına nasıl ulaşıldığını kontrol etmek istiyoruz. Bunun için, [middleware] özelliğini bu [index] sayfasına eklememiz gerekiyor:


<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() {
    // istemci ve sunucu
    console.log('[home beforeCreate]')
  },
  created() {
    // istemci ve sunucu
    console.log('[home created]')
  },
  beforeMount() {
    // sadece istemci
    console.log('[home beforeMount]')
  },
  mounted() {
    // sadece istemci
    console.log('[home mounted]')
  },
  // yönlendirme
  middleware: ['index-routing']
}
</script>
  • 34. satır: [middleware] özelliği, bir sonraki görüntülenecek sayfa [index] olduğunda her seferinde çalıştırılacak komut dosyalarını listeler. Burada da bu komut dosyaları, projenin [middleware] klasöründe aranacaktır;

[index-routing] orta katmanı şu şekildedir:


/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function(...args) {
  // bu kodu kim çalıştırıyor?
  console.log('[index-routing], process.server=', process.server, 'process.client=', process.client)
  const who = process.server ? 'server' : 'client'
  const indexRouting = '[index-routing ' + who + ']'
  // argüman sayısı
  console.log(indexRouting + ', il y a', args.length, 'argument(s)')

  // 1. argüman
  const context = args[0]
  // bağlam anahtarları
  dumpkeys(indexRouting + ', context', context)
  // uygulama
  dumpkeys(indexRouting + ', context.app', context.app)
  // yol
  dumpkeys(indexRouting + ', context.route', context.route)
  console.log(indexRouting + ', context.route=', context.route)
  // yönlendirici
  dumpkeys(indexRouting + ', context.app.router', context.app.router)
  // router.options.routes
  dumpkeys(indexRouting + ', context.app.router.options.routes', context.app.router.options.routes)
  console.log(indexRouting + ', context.app.router.options.routes=', context.app.router.options.routes)
  // nereden geliyoruz?
  if (context.from) {
    console.log('from=', context.from)
  }
}

function dumpkeys(message, object) {
  // [object] anahtar listesi
  const ligne = 'Liste des clés [' + message + ']'
  console.log(ligne)
  // anahtar listesi
  if (object) {
    console.log(Object.keys(object))
  }
}

[index-routing] kodunun içeriği, [routing] ile aynıdır ve aynı sonuçları verir. Bizi ilgilendiren, bu iki orta katman yazılımının ne zaman çalıştırıldığıdır.

11.3. Projenin çalıştırılması

Projeyi çalıştırıyoruz. Bu durumda günlük kayıtları şu şekildedir:

Sunucu tarafından ilk olarak [routing] komut dosyası çalıştırılır:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
[routing], process.server= true process.client= false
[routing server], il y a 1 argument(s)
Liste des clés [[routing server], context]
[ 'isStatic',
  'isDev',
  'isHMR',
  'app',
  'payload',
  'error',
  'base',
  'env',
  'req',
  'res',
  'ssrContext',
  'redirect',
  'beforeNuxtRender',
  'route',
  'next',
  '_redirected',
  '_errored',
  'params',
  'query',
   '$axios' ]
Liste des clés [[routing server], context.app]
[ 'router',
  'nuxt',
  'head',
  'render',
  'data',
  'beforeCreate',
  'created',
  'mounted',
  'watch',
  'computed',
  'methods',
  'components',
  'context',
   '$axios' ]
Liste des clés [[routing server], context.route]
[ 'name',
  'meta',
  'path',
  'hash',
  'query',
  'params',
  'fullPath',
  'matched' ]
[routing server], context.route= { name: 'index',
  meta: [ {} ],
  path: '/',
  hash: '',
  query: {},
  params: {},
  fullPath: '/',
  matched:
   [ { path: '',
       regex: /^(?:\/(?=$))?$/i,
       components: [Object],
       instances: {},
       name: 'index',
       parent: undefined,
       matchAs: undefined,
       redirect: undefined,
       beforeEnter: undefined,
       meta: {},
       props: {} } ] }
Liste des clés [[routing server], context.app.router]
[ 'app',
  'apps',
  'options',
  'beforeHooks',
  'resolveHooks',
  'afterHooks',
  'matcher',
  'fallback',
  'mode',
  'history' ]
Liste des clés [[routing server], context.app.router.options.routes]
[ '0', '1', '2' ]
[routing server], context.app.router.options.routes= [ { path: '/page1',
    component: [Function: _61cefe10],
    name: 'page1' },
  { path: '/page2',
    component: [Function: _61dd1591],
    name: 'page2' },
  { path: '/', component: [Function: _00d5e140], name: 'index' } ]

Burada, eklentilerle elde ettiğimiz sonuçları görüyoruz.

  • 15. satır: [redirect] özelliği, orta katman yazılımlarında sıklıkla kullanılır; bu özellik, mevcut yönlendirmenin hedefini değiştirmeye olanak tanır;

Ardından, görüntülenecek sayfa [index] olduğu için, sunucu [index-routing] komut dosyasını çalıştırır ve aşağıdaki günlükleri görüntüler:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
[index-routing], process.server= true process.client= false
[index-routing server], il y a 1 argument(s)
Liste des clés [[index-routing server], context]
[ 'isStatic',
  'isDev',
  'isHMR',
  'app',
  'payload',
  'error',
  'base',
  'env',
  'req',
  'res',
  'ssrContext',
  'redirect',
  'beforeNuxtRender',
  'route',
  'next',
  '_redirected',
  '_errored',
  'params',
  'query',
   '$axios' ]
Liste des clés [[index-routing server], context.app]
[ 'router',
  'nuxt',
  'head',
  'render',
  'data',
  'beforeCreate',
  'created',
  'mounted',
  'watch',
  'computed',
  'methods',
  'components',
  'context',
   '$axios' ]
Liste des clés [[index-routing server], context.route]
[ 'name',
  'meta',
  'path',
  'hash',
  'query',
  'params',
  'fullPath',
  'matched' ]
[index-routing server], context.route= { name: 'index',
  meta: [ {} ],
  path: '/',
  hash: '',
  query: {},
  params: {},
  fullPath: '/',
  matched:
   [ { path: '',
       regex: /^(?:\/(?=$))?$/i,
       components: [Object],
       instances: {},
       name: 'index',
       parent: undefined,
       matchAs: undefined,
       redirect: undefined,
       beforeEnter: undefined,
       meta: {},
       props: {} } ] }
Liste des clés [[index-routing server], context.app.router]
[ 'app',
  'apps',
  'options',
  'beforeHooks',
  'resolveHooks',
  'afterHooks',
  'matcher',
  'fallback',
  'mode',
  'history' ]
Liste des clés [[index-routing server], context.app.router.options.routes]
[ '0', '1', '2' ]
[index-routing server], context.app.router.options.routes= [ { path: '/page1',
    component: [Function: _61cefe10],
    name: 'page1' },
  { path: '/page2',
    component: [Function: _61dd1591],
    name: 'page2' },
  { path: '/', component: [Function: _00d5e140], name: 'index' } ]

[index-routing] komut dosyasıyla elde edilen sonuçlar, [routing] komut dosyasıyla elde edilen sonuçlara benzerdir.

[index] sayfası istemci tarayıcısı tarafından alındığında, iş istemci komut dosyalarına geçer. Günlükler şu şekilde olur:

1
2
3
4
[home beforeCreate]
[home created]
[home beforeMount]
[home mounted]

Görüldüğü gibi, uygulamanın başlatılması sırasında istemci hiçbir orta katman yazılımını çalıştırmaz. Bu, kullanıcının sunucuya bir çağrı yapmasını her zorladığında bu durumun tekrarlanacağı anlamına gelir. Orta katman yazılımları, yalnızca istemci içinde gezinme sırasında istemci tarafından çalıştırılır. Örneğin, [index] sayfasında iken [Page 1] bağlantısını kullanarak [page1] sayfasına gidelim. Bu durumda günlükler şu şekilde olur:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
[routing], process.server= false process.client= true
[routing client], il y a 1 argument(s)
Liste des clés [[routing client], context]
(18) ["isStatic", "isDev", "isHMR", "app", "payload", "error", "base", "env", "redirect", "nuxtState", "route", "next", "_redirected", "_errored", "params", "query", "$axios", "from"]
Liste des clés [[routing client], context.app]
(14) ["router", "nuxt", "head", "render", "data", "beforeCreate", "created", "mounted", "watch", "computed", "methods", "components", "context", "$axios"]
Liste des clés [[routing client], context.route]
(8) ["name", "meta", "path", "hash", "query", "params", "fullPath", "matched"]
[routing client], context.route= {name: "page1", meta: Array(1), path: "/page1", hash: "", query: {…}, …}
Liste des clés [[routing client], context.app.router]
(10) ["app", "apps", "options", "beforeHooks", "resolveHooks", "afterHooks", "matcher", "fallback", "mode", "history"]
Liste des clés [[routing client], context.app.router.options.routes]
(3) ["0", "1", "2"]
[routing client], context.app.router.options.routes= (3) [{…}, {…}, {…}]0: {path: "/page1", name: "page1", component: ƒ}1: {path: "/page2", name: "page2", component: ƒ}2: {path: "/", name: "index", component: ƒ}length: 3__proto__: Array(0)
[page1 beforeCreate]
[page1 created]
[page1 beforeMount]
[page1 mounted]
  • 2. satır: [routing] orta katmanı istemci tarafından çalıştırılır;
  • 4. satır: [from] özelliğine dikkat edin: bu, geldiğimiz yoldur;
  • 9. satır: [context.route], gideceğimiz yoldur;
  • 15-18. satırlar: [page1] sayfasının görüntülenmesi;

Şimdi [Home] bağlantısını kullanarak [index] sayfasına geri dönelim. Bu durumda günlük kayıtları şu şekildedir:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
[routing], process.server= false process.client= true
[routing client], il y a 1 argument(s)
Liste des clés [[routing client], context]
(18) ["isStatic", "isDev", "isHMR", "app", "payload", "error", "base", "env", "redirect", "nuxtState", "route", "next", "_redirected", "_errored", "params", "query", "$axios", "from"]
Liste des clés [[routing client], context.app]
(14) ["router", "nuxt", "head", "render", "data", "beforeCreate", "created", "mounted", "watch", "computed", "methods", "components", "context", "$axios"]
Liste des clés [[routing client], context.route]
(8) ["name", "meta", "path", "hash", "query", "params", "fullPath", "matched"]
[routing client], context.route= {name: "index", meta: Array(1), path: "/", hash: "", query: {…}, …}
Liste des clés [[routing client], context.app.router]
(10) ["app", "apps", "options", "beforeHooks", "resolveHooks", "afterHooks", "matcher", "fallback", "mode", "history"]
Liste des clés [[routing client], context.app.router.options.routes]
(3) ["0", "1", "2"]
[routing client], context.app.router.options.routes= (3) [{…}, {…}, {…}]0: {path: "/page1", name: "page1", component: ƒ}1: {path: "/page2", name: "page2", component: ƒ}2: {path: "/", name: "index", component: ƒ}length: 3__proto__: Array(0)
[index-routing], process.server= false process.client= true
[index-routing client], il y a 1 argument(s)
Liste des clés [[index-routing client], context]
(18) ["isStatic", "isDev", "isHMR", "app", "payload", "error", "base", "env", "redirect", "nuxtState", "route", "next", "_redirected", "_errored", "params", "query", "$axios", "from"]
Liste des clés [[index-routing client], context.app]
(14) ["router", "nuxt", "head", "render", "data", "beforeCreate", "created", "mounted", "watch", "computed", "methods", "components", "context", "$axios"]
Liste des clés [[index-routing client], context.route]
(8) ["name", "meta", "path", "hash", "query", "params", "fullPath", "matched"]
[index-routing client], context.route= {name: "index", meta: Array(1), path: "/", hash: "", query: {…}, …}
Liste des clés [[index-routing client], context.app.router]
(10) ["app", "apps", "options", "beforeHooks", "resolveHooks", "afterHooks", "matcher", "fallback", "mode", "history"]
Liste des clés [[index-routing client], context.app.router.options.routes]
(3) ["0", "1", "2"]
[index-routing client], context.app.router.options.routes= (3) [{…}, {…}, {…}]0: {path: "/page1", name: "page1", component: ƒ}1: {path: "/page2", name: "page2", component: ƒ}2: {path: "/", name: "index", component: ƒ}length: 3__proto__: Array(0)
from= {name: "page1", meta: Array(1), path: "/page1", hash: "", query: {…}, …}
[home beforeCreate]
[home created]
[home beforeMount]
[home mounted]
  • satır 1-15: istemci, [routing] orta katman yazılımını çalıştırır. Bu normaldir. Her rota değişikliğinde bu yazılım çalıştırılır;
  • satır 16-29: İstemci, [index-routing] orta katman yazılımını çalıştırır; bunun nedeni şudur:
    • [index], mevcut rotanın hedefidir (bkz. satır 23);
    • [index] sayfası, [index-routing] adlı bir ara yazılım tanımlamıştır;

Görüldüğü gibi, genel yönlendirme orta katmanları, sayfalara bağlı orta katmanlardan önce istemci tarafından yürütülür.

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.