vue.js – 用外部json填充路由器

2023年8月23日 267次阅读

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

我用我自己的实现覆盖了默认的Nuxt路由器.如果我使用axios router.addRoutes()导入路由async,我似乎松开了服务器端渲染.似乎createRouter将具有异步支持,但它还没有正式发布的Nuxt.

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

模块/ 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
}

最佳答案 您可以尝试使用sync-request.

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

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

点赞