nuxt框架,组件或内容只在客户端渲染,不在服务器端渲染

351 阅读1分钟
  1. <client-only> 组件
  • 作用:确保其子组件或内容只在客户端渲染,不在服务器端渲染。
  • 使用场景:依赖于浏览器 API 或者需要在客户端执行的代码。
  • 示例
  <client-only>
    <div class="phoneContent">
      <van-nav-bar title="首页" />
      <van-tabbar v-model="active" class="tab">
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="search">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
      </van-tabbar>
    </div>
  </client-only>