Question

我想将路由从外部json文件添加到我的Nuxt应用程序，该文件可以在运行时更改。可以找到类似的主题here。

我已经用自己的实现覆盖了默认的Nuxt路由器。如果我使用axios + router.addRoutes()异步导入路由，则似乎会丢失服务器端渲染。似乎createRouter将具有异步支持，但尚未在Nuxt的正式版本中提供。

如何将js / json文件同步导入到下面的router.js中，以便填充路由？我希望能够在运行时配置路由，所以我不希望它成为捆绑软件的一部分。

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

您可以尝试使用sync-request。

这是一个NPM软件包，旨在执行同步Web请求。 here可用。

请注意，如软件包本身的文档所述，它不适用于生产环境，可能是因为在丢失数据的情况下应用程序挂起了。

Answer 2

So await would be an answer but I guess you already tried that? So, something like this.

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

In case you can't make the method async, as a workaround maybe use jQuery. I don't like this but if there's no other option, for now, use async: false in jQuery get.

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

    },
    async: false
});

使用外部JSON填充路由器

2 个答案: