export default function(req, res, next) {
const paths = ['/', '/a']
if (paths.includes(req.originalUrl)) {
// Will trigger the "traditional SPA mode"
res.spa = true
}
// Don't forget to call next in all cases!
// Otherwise, your app will be stuck forever :|
next()
}
<template>
<div>
<sidebar />
<client-only placeholder="Loading...">
<!-- this component will only be rendered on client-side -->
<comments />
</client-only>
</div>
</template>
5条答案
按热度按时间ajsxfq5m1#
你可以通过服务器中间件来完成。例如,在
~/server-middleware/check-spa.js
下添加以下文件。不要使用middleware
目录,因为它是路由中间件的目录,会被复制到客户端代码中。然后,在
nuxt.config.js
中启用服务器中间件,如下所示更多信息:https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/
https://blog.lichter.io/posts/nuxt-dynamic-ssr-spa-handling/
kse8i1jr2#
将您不想在服务器端呈现的组件的内容 Package 在
<client-only></client-only>
标记中(对于nuxt版本〈2.9.0,为<no-ssr></no-ssr>
)。@DenisTsoi的链接应该会给予你更多关于它如何工作的信息。
goqiplq23#
如果您的Nuxt版本**〉v2.9.0**,则使用
<client-only>
代替<no-ssr>
。下面是一个例子:
Loading...
用作占位符,直到<client-only>
中的组件装载到客户端。您可以在此了解更多信息:Nuxt API - The
<client-only>
Componentx0fgdtte4#
如果它是一个插入到另一个组件中的组件,请将其 Package 在
<no-ssr> <your-component /> </no-ssr>
标签中。(它曾经是<client-only> </client-only>
)如果它是插入
nuxt.connfig
文件的插件或mixin,您可以将其更改为wecizke35#
只需转到nuxt.config.js,搜索模式并将其更改为