前端进阶5 - Nuxt.js - 11-NuxtJS内置的API

270 阅读1分钟
  • 11-NuxtJS内置的API

    • ESSENTIAL - 基本

      • context(上下文对象)
    • PAGES - 页面配置

      • asyncData(异步请求)

        • 在渲染组件之前异步获取数据
      • fetch(异步请求,不会设置组件的数据)

        • 在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
      • head(单独设置meta标签)

        • Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) 和 html 属性。
        • 使用 head 方法设置当前页面的头部标签。
        • 在 head 方法里可通过 this 关键字来获取组件的数据,你可以利用页面组件的数据来设置个性化的 meta 标签。
      • key(设置内部< router-view>组件的key属性)

        • key属性赋值到< router-view>,这对于在动态页面和不同路径中进行转换很有用。不同的key会使页面组件重新渲染。
      • layout(引用布局文件)

        • layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用。
      • loading(是否显示进度条)

        • loading 属性为您提供了禁用特定页面上的默认加载进度条的选项。
      • middleware(设置中间件)
      • scrollToTop(是否滚动至页面顶部)

        • scrollToTop 属性用于控制页面渲染前是否滚动至页面顶部。
      • transition(路由切换时的过渡动效)

        • Nuxt.js 使用 Vue.js 的< transition >组件来实现路由切换时的过渡动效。
      • validate(校验数据)

        • Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。
        • validate({ params }) {return /^\d+$/.test(params.id)}
      • watchQuery(监听参数字符串更改,更改时执行组件方法)

        • 监听参数字符串更改并在更改时执行组件方法 (asyncData, fetch, validate, layout, ...)
        • 为了提高性能,默认情况下禁用。
    • COMPONENTS - 组件

      • nuxt(该组件只适用于在布局中显示页面组件(即非布局内容))
      • nuxt-child(该组件用于显示嵌套路由场景下的页面内容。父组件引入子组件)
      • nuxt-link(用于在页面中添加链接至别的页面)

        • 目前 的作用和 一致
      • client-only(此组件用于仅在客户端渲染其他组件.)

        • 警告: Nuxt 版本小于 v2.9.0 的用户, 请使用 < no-ssr>
    • UTILS

      • nuxtnuxt(nuxt: NuxtJS 的优化帮手)

        • isOffline

          • 类型: Boolean
          • 描述: true 当用户互联网连接变为离线时
        • isOnline

          • 类型: Boolean
          • 描述: isOffline相反
        • 举个例子:< div v-if="$nuxt.isOffline">You are offline</ div>
    • CONFIGURATION(nuxt.config.js配置文件)