Question

我有一个小组是由vuejs开发的，并且证实了使用v-router在客户端管理路由的方法，实际上我已经开发了大约70％的小组，并且由于最终的更改，我必须处理服务器发布请求仅可从付款页面返回。我想将NUXT用于SSR，但问题是NUXT忽略了我过去的所有路由，因为它本身没有这些路由。我的问题是，当我的面板在客户端正常工作时，NUXT只能用于在服务器向客户端请求后仅加载一页吗？我是Web编程的新手，我希望我提出了正确的问题。无论如何，感谢您的所有帮助。

我在没有index.vue文件的页面目录中添加了nossr.vue（这是该目录中唯一的组件，其余的vue组件都放置在Components目录中）。我将[https://stackoverflow.com/questions/54289615/how-to-read-post-request-parameters-in-nuxtjs][1]用于自定义中间件和发布请求句柄类。

这是postRequestHandle.js：

const querystring = require('querystring');

module.exports = function (req, res, next) {
    let body = '';

    req.on('data', (data) => {
        console.log("post request data",data)

        body += data;
    });

    req.on('end', () => {
        req.body = querystring.parse(body) || {};
        console.log("post request handler",req.body)

        next();
    });
};

和nuxt.config.js

export default {
    devServer: {
        host: 'mypanel.test.net',
        port: 8080,
        disableHostCheck: true,
        hotOnly: true,

    },

    serverMiddleware: [
        { path: '/clickout', handler: './server-middleware/postRequestHandler.js' },

    ],
    layout(context) {
        return 'nossr'
    }

}

Answer 1

在Nuxt中创建一个名为nossr.vue的额外布局，使它的第一个元素为<client-only>元素。在除SSR呈现的页面之外的所有页面上都输入以下内容：


export default {
  layout: 'nossr'
}

有关Nuxt中布局的更多信息，请查看此https://nuxtjs.org/guides/directory-structure/layouts/

Answer 2

您可以通过在serverMiddleware中设置res.spa = true来禁用除特定页面以外的所有页面的SSR

export default function(req, res, next) {
  if (req.url !== '/clickout') {
    res.spa = true;
  } 
  next();
}

另请参阅：
Nuxt Issue: Per-route ssr

使用Nuxt仅用于一页的服务器端渲染

2 个答案: