使用外部 json 填充路由器

Posted 2023-02-22

【中文标题】使用外部 json 填充路由器

【英文标题】：Populate router with external json

【发布时间】：2019-02-11 01:40:03

【问题描述】：

我想将外部 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

【问题讨论】：

我认为您可以导入您的 json 文件，例如 import myroutes from 'thepath/routes.json' 和 ... mode:'hidtory',routes:myroutes...

@boussadjrabrahim 如果我这样做，它将在我构建时成为捆绑包的一部分。

是的，我明白了，您是否尝试使用 axios 来完成此操作？

@boussadjrabrahim 是的，我已经尝试过我提到的异步方法，但此时加载需要同步执行

@P3trur0 不知道我是怎么错过的，请随时将其发布为答案:)

【参考方案1】：

你可以试试sync-request。

它是一个旨在执行同步 Web 请求的 NPM 包。它是可用的here。

请注意，正如包本身的文档所述，它不适合生产环境，可能是因为应用程序挂起以防丢失数据。

【参考方案2】：

所以await 会是一个答案，但我猜你已经尝试过了？所以，像这样。

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

如果您无法使方法异步，则可以使用 jQuery 作为解决方法。我不喜欢这个，但如果没有其他选择，现在，在 jQuery get 中使用async: false。

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

    ,
    async: false
);

【讨论】：

“所以 await 将是一个答案” - 不，我想同步加载数据，如前所述。

如果我错了，请纠正我，但如果您不希望代码执行在承诺解决之前继续，这将解决该问题。应该加载路线。如果您希望它同步，那么不幸的是，至少目前您需要 jquery。使用 axios 我认为目前是不可能的。