QNoSsr

仅当您创建SSR网站/应用时,QNoSsr组件才有意义。

它避免在服务器上渲染其内容,而仅将内容留给客户端。 当您获得的代码不是同构的,并且只能在客户端的浏览器中运行时,此功能非常有用。

另外,您也可以使用它仅在服务器端渲染内容,如果最终在客户端浏览器上运行,它将自动将渲染的内容删除。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

基础

<q-no-ssr>
  <div>This won't be rendered on server</div>
</q-no-ssr>

多客户端结点

<q-no-ssr>
  <div>This won't be rendered on server.</div>
  <div>This won't either.</div>
</q-no-ssr>

多客户端结点带tag属性

<q-no-ssr tag="blockquote">
  <div>This won't be rendered on server.</div>
  <div>This won't either.</div>
</q-no-ssr>

Placeholder属性

<q-no-ssr placeholder="Rendered on server">
  <div>This won't be rendered on server</div>
</q-no-ssr>

Placeholder插槽

<q-no-ssr>
  <div>This won't be rendered on server</div>
  <template v-slot:placeholder>
    <div>Rendered on server</div>
  </template>
</q-no-ssr>

在placeholder插槽中含有多个内容

<q-no-ssr>
  <div>This won't be rendered on server</div>
  <template v-slot:placeholder>
    <div>Rendered on server (1/2)</div>
    <div>Rendered on server (2/2)</div>
  </template>
</q-no-ssr>

仅placeholder插槽

<q-no-ssr>
  <template v-slot:placeholder>
    <div>Rendered on server</div>
  </template>
</q-no-ssr>

QNoSsr API

Loading API...
Please wait...