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

Question

我的问题是关于如何使用 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) 我在第三方系统上输入一个页面，该页面向我的 express 端点发出 GET 请求。

2) 一旦承诺在我的应用程序中得到解决，我需要返回 HTML 内容，然后将其填充到 iframe 内的第三方系统中。

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

感谢您的帮助！

Answer 1

我不是 Nuxt 方面的专家，因此我无法为您提供某些细节方面的帮助，但我可以告诉您，如果您从默认的 nuxt-express 项目开始，您可以编辑 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 } );
                } );
} );

如果您随后在 pages/foo.vue 创建一个 vue 文档并在浏览器中访问 /foo，则 Promise 将在 500 毫秒后解析并执行渲染路由并显示所需页面的回调。

这个解决方案似乎有效，但没有解决两件事：

• 根据the documentation，renderRoute 的参数实际上应该是一个包含req 和res 属性的上下文对象。我不知道您实际上应该如何在响应中转发数据，但这似乎不是合适的方式。
• 我什至不确定renderRoute 应该以这种方式使用。在文档中，它在 Nuxt Builder 对象的解析中使用，我怀疑它可能是一次性操作，而不是每次发出请求时都会重复调用的操作。我不确定这两种方式，但最好检查一下。查看nuxt-express 页面，了解如何在渲染过程中渲染路由和传递数据的一些示例可能会有所帮助。

祝你好运！