Remplir le routeur avec du json externe

Question

Je voudrais ajouter à mon application Nuxt des routes provenant d'un fichier json externe, qui peut changer au moment de l'exécution. Un sujet similaire peut être trouvé aquí .

J'ai remplacé le routeur Nuxt par défaut par ma propre implémentation. Si j'importe les routes de manière asynchrone en utilisant axios + router.addRoutes() mais il semble que je perde le rendu côté serveur. Il semble que createRouter aura un support asynchrone, mais ce n'est pas encore dans une version officielle de Nuxt.

Comment importer un fichier js/json ? de manière synchrone à mon router.js ci-dessous, afin que je puisse alimenter les routes ? Je veux pouvoir configurer les routes au moment de l'exécution, donc je ne veux pas qu'elles fassent partie du bundle.

modules/router.js :

const path = require('path')

module.exports = function () {
  this.nuxt.options.build.createRoutes = () => {}
  this.addTemplate({
    fileName: 'router.js',
    src: path.resolve(`${this.options.srcDir}`, 'router.js')
  })
}

nuxt.config.js :

modules: ['~/modules/router']

router.js :

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export function createRouter () {
  const router = new Router({
    mode: 'history',
    routes: [/* ... */]
  })

  return router
}

Answer 1

Vous pouvez essayer avec sync-request .

Il s'agit d'un paquet NPM destiné à effectuer des requêtes web synchrones. Il est disponible aquí .

Veuillez noter que, comme indiqué dans la documentation du paquet lui-même, il n'est pas adapté à un environnement de production, probablement en raison de l'arrêt de l'application en cas de données manquantes.

Answer 2

Alors await serait une réponse mais je suppose que vous avez déjà essayé ? Donc, quelque chose comme ça.

const routeFile = await fetch('pathToTheJsonFile');
const routes = await routeFile.json();

Si vous ne pouvez pas rendre la méthode asynchrone, vous pouvez utiliser jQuery comme solution de rechange. Je n'aime pas ça mais s'il n'y a pas d'autre option, pour le moment, utilisez async: false dans jQuery get.

jQuery.ajax({
    url: 'pathToYourJsonRoutes',
    success: function (result) {

    },
    async: false
});