如何将Nuxt页面呈现为来自快速路线的响应

时间:2018-05-19 12:07:52

标签: javascript node.js express vue.js nuxt.js

我的问题是如何使用nuxt页面触发res.render之类的内容?

该项目正在使用nuxt-express模板 - Nuxt&的组合。 Expressjs。

我知道nuxt有: nuxt.render(req, res) nuxt.renderRoute ,但我似乎无法让它工作 - 或者找不到它的任何使用示例都类似于下面的代码块,其中渲染应在promise解决后发生。

我之前在其他应用程序中使用res.render处理过这个问题......

router.get('/', (req,res,next) => {
    dothePromise(req.query)
      .then(data => {
        res.render('pages/auth', {data:data})
      }
}

可能有用的一些进一步细节:

这个过程是......

1)我在第三方系统上输入一个页面,该系统向我的快速终端发出GET请求。

2)在我的应用程序中解析了promise后,我需要返回HTML内容,然后将其填充到iframe内的第三方系统中。

这是我的第一个stackoverflow问题 - 如果我遗漏了任何内容或应该对问题进行调整,请告诉我。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我不是Nuxt的专家,所以我无法帮助您处理某些细节,但我可以告诉您,如果您从默认的nuxt-express项目开始,您可以编辑{ {1}}包含以下内容:

server/index.js

如果您随后在function doThePromise( query ) { return new Promise( ( resolve, reject ) => { setTimeout( () => resolve( "hi" ), 500 ); } ); }; app.get( '/foo', ( req, res, next ) => { doThePromise( req.query ) .then( data => { console.log( "rendering", res.renderRoute ); res.renderRoute( 'pages/foo', { data: data } ); } ); } ); 创建了一个vue文档并在浏览器中访问pages/foo.vue,则承诺将在500ms后解析并执行回调,该回调将呈现该路线并显示所需的页面。

这个解决方案似乎有效,但没有解决两件事:

  • 根据the documentation/foo的参数实际上应该是包含renderRoutereq属性的上下文对象。我不知道您实际上应该如何在回复中转发数据,但这似乎并不合适。
  • 我甚至不确定res是否应该以这种方式使用。在文档中,它在Nuxt renderRoute对象的使用中使用,我怀疑它可能是一次性操作,而不是每次请求时都会重复调用的内容。我不确定哪种方式,但最好检查一下。查看Builder页面可能需要了解如何在渲染过程中渲染路径和传递数据的一些示例。
祝你好运!