11. Приклад [nuxt-08]: проміжні модулі маршрутизації

У цьому прикладі ми вводимо поняття проміжних модулів маршрутизації — скриптів, що виконуються при кожній зміні маршруту.

Приклад [nuxt-08] спочатку отримується шляхом копіювання проєкту [nuxt-01]:

Проміжні модулі маршрутизації повинні знаходитися в папці з назвою [middleware] [2]. Може існувати дворівнева маршрутизація:

• маршрутизація, що застосовується до кожної навігації. У цьому випадку вона заявляється у файлі [nuxt.config.js];
• маршрутизація, що застосовується до конкретної сторінки, коли вона є ціллю маршрутизації. У цьому випадку маршрутизація заявляється на цій цільовій сторінці;

11.1. Загальна маршрутизація

Файл [middleware / routing.js] забезпечуватиме загальну маршрутизацію. Вона заявляється у файлі [nuxt.config.js] наступним чином:

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

Проміжні модулі загальної маршрутизації є властивістю маршрутизатора (рядок 1). Може бути кілька проміжних модулів маршрутизації. Тому в рядку 3 значення властивості [middleware] є масивом. Бачимо, що для позначення проміжного модуля не використовується шлях. Він автоматично шукатиметься у папці [middleware] проекту;

Проміжне програмне забезпечення [routing] тут лише веде журнали:

/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function(...args) {
  // хто виконує цей код?
  console.log('[routing], process.server=', process.server, 'process.client=', process.client)
  const who = process.server ? 'server' : 'client'
  const routing = '[routing ' + who + ']'
  // кількість аргументів
  console.log(routing + ', il y a', args.length, 'argument(s)')

  // перший аргумент
  const context = args[0]
  // ключі контексту
  dumpkeys(routing + ', context', context)
  // додаток
  dumpkeys(routing + ', context.app', context.app)
  // маршрут
  dumpkeys(routing + ', context.route', context.route)
  console.log(routing + ', context.route=', context.route)
  // маршрутизатор
  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]
  const ligne = 'Liste des clés [' + message + ']'
  console.log(ligne)
  // список ключів
  if (object) {
    console.log(Object.keys(object))
  }
}

• рядок 3: ми побачимо, що проміжне програмне забезпечення отримує аргумент: контекст виконавця (сервер або клієнт);
• рядки 4–25: ми виводимо властивості різних об’єктів, щоб з’ясувати, що можна використовувати. Ми побачимо, що контекст проміжного програмного забезпечення майже ідентичний контексту плагіна;

11.2. Маршрутизація для конкретної сторінки

Ми хочемо контролювати спосіб переходу на сторінку [index]. Для цього нам потрібно додати властивість [middleware] на цю сторінку [index]:

<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: {
    Layout,
    Navigation
  },
  // життєвий цикл
  beforeCreate() {
    // клієнт і сервер
    console.log('[home beforeCreate]')
  },
  created() {
    // клієнт і сервер
    console.log('[home created]')
  },
  beforeMount() {
    // тільки клієнт
    console.log('[home beforeMount]')
  },
  mounted() {
    // тільки клієнт
    console.log('[home mounted]')
  },
  // маршрутизація
  middleware: ['index-routing']
}
</script>

• рядок 34: властивість [middleware] містить список скриптів, які мають виконуватися щоразу, коли наступною сторінкою, що відображається, є сторінка [index]. І в цьому випадку ці скрипти будуть шукатися у папці [middleware] проекту;

Проміжне програмне забезпечення [index-routing] має такий вигляд:

/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function(...args) {
  // хто виконує цей код?
  console.log('[index-routing], process.server=', process.server, 'process.client=', process.client)
  const who = process.server ? 'server' : 'client'
  const indexRouting = '[index-routing ' + who + ']'
  // кількість аргументів
  console.log(indexRouting + ', il y a', args.length, 'argument(s)')

  // перший аргумент
  const context = args[0]
  // ключі контексту
  dumpkeys(indexRouting + ', context', context)
  // додаток
  dumpkeys(indexRouting + ', context.app', context.app)
  // маршрут
  dumpkeys(indexRouting + ', context.route', context.route)
  console.log(indexRouting + ', context.route=', context.route)
  // маршрутизатор
  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)
  // звідки ми прийшли?
  if (context.from) {
    console.log('from=', context.from)
  }
}

function dumpkeys(message, object) {
  // список ключів [object]
  const ligne = 'Liste des clés [' + message + ']'
  console.log(ligne)
  // список ключів
  if (object) {
    console.log(Object.keys(object))
  }
}

Код [index-routing] ідентичний коду [routing] і дає ті самі результати. Нас цікавить, коли виконуються ці два проміжні модулі.

11.3. Виконання проєкту

Ми запускаємо проект. У результаті отримуємо такі журнали:

Сервер спочатку виконує скрипт [routing]:

[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' } ]

Тут ми бачимо те саме, що й у випадку з плагінами.

• рядок 15: властивість [redirect] часто використовується в проміжному програмному забезпеченні: вона дозволяє змінити ціль поточного маршрутизації;

Потім, оскільки сторінка, яка буде відображена, — це сторінка [index], сервер виконує скрипт [index-routing] і виводить такі записи в журналі:

[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], аналогічні тим, що отримані за допомогою скрипта [routing].

Після того як сторінка [index] отримана браузером клієнта, управління переходить до клієнтських скриптів. Журнали набувають такого вигляду:

[home beforeCreate]
[home created]
[home beforeMount]
[home mounted]

Отже, бачимо, що під час запуску додатка клієнт не виконує жодного проміжного програмного забезпечення. Це означає, що це відбуватиметься щоразу, коли користувач ініціює виклик до сервера. Проміжне програмне забезпечення виконується клієнтом лише під час навігації всередині самого додатка. Наприклад, перейдемо на сторінку [page1] (зараз ми перебуваємо на сторінці [index]) за посиланням [Page 1]. У цьому випадку журнали матимуть такий вигляд:

[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: клієнт виконує проміжне програмне забезпечення [routing];
• рядок 4: зверніть увагу на властивість [from] — це маршрут, з якого ми прийшли;
• рядок 9: [context.route] — це маршрут, куди ми прямуємо;
• рядки 15–18: відображення сторінки [page1];

Тепер повернімося на сторінку [index] за посиланням [Home]. У цьому випадку записи у журналі виглядають так:

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

• рядки 1–15: клієнт запускає проміжне програмне забезпечення [routing]. Це нормально. Воно запускається при кожній зміні маршруту;
• рядки 16–29: клієнт запускає проміжне програмне забезпечення [index-routing], оскільки:
  • [index] є ціллю поточного маршруту (див. рядок 23);
  • сторінка [index] визначила проміжний модуль, а саме [index-routing];

Отже, бачимо, що проміжні модулі загального маршрутизації виконуються клієнтом раніше, ніж проміжні модулі, прив’язані до сторінок.