Nuxt 视图

如何在 Nuxt.js 应用中为指定的路由配置数据和视图，包括应用模板、页面、布局和 HTML 头部等内容

定制化默认的 html 模板

只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件

  1. 默认模板为

  2. 举个例子，可以修改模板添加 IE 的条件表达式：

布局

  1. Nuxt.js 允许扩展默认的布局，或在 layout 目录下创建自定义的布局；

  2. 默认布局：

    • 可通过添加 layouts/default.vue 文件来扩展应用的 默认布局；
    • 提示: 别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容；
    • 默认布局的源码如下：

  3. 自定义布局

    • layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局；
    • 假设要创建一个 博客布局 并将其保存到 layouts/blog.vue:
    • 然后必须告诉页面 (即 pages/posts.vue) 使用自定义布局：

错误页面

  1. 可以通过编辑 layouts/error.vue 文件来定制化错误页面；

  2. 警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个 页面(page)；

  3. 这个布局文件不需要包含 <nuxt/> 标签，可以把这个布局文件当成是显示应用错误（404，500 等）的组件；

  4. 举一个个性化错误页面的例子 layouts/error.vue:

Nuxt 异步数据

Nuxt.js 扩展了 Vue.js ，增加了一个叫 asyncData 的方法，可以在设置组件的数据之前能异步获取或处理数据；

asyncData 方法

  1. 基本用法：

    • 它会将 asyncData 返回的数据融合组件 data 方法返回数据一并给组件；
    • 调用时机：服务端渲染期间和客户端路由更新之前（服务端和客户端都可以使用）；

  2. 注意事项：

    • 只能在页面组件中使用（import 引入组件是不会调用 asyncData 方法的）；
    • 没有 this ，因为它是在组件初始化之前被调用的；

上下文对象 ctx

属性字段 类型 可用 描述
app Vue 根实例 客户端 & 服务端 包含所有插件的 Vue 根实例。例如：在使用 axios 的时候，你想获取 $axios 可以直接通过 context.app.$axios 来获取
isClient Boolean 客户端 & 服务端 是否来自客户端渲染（废弃。请使用 process.client ）
isServer Boolean 客户端 & 服务端 是否来自服务端渲染（废弃。请使用 process.server ）
isStatic Boolean 客户端 & 服务端 是否来自 nuxt generate 静态化（预渲染）（废弃。请使用 process.static ）
isDev Boolean 客户端 & 服务端 是否是开发 dev 模式，在生产环境的数据缓存中用到
isHMR Boolean 客户端 & 服务端 是否是通过模块热替换 webpack hot module replacement (仅在客户端以 dev 模式)
route Vue Router 路由 客户端 & 服务端 Vue Router 路由实例
store Vuex 数据 客户端 & 服务端 Vuex.Store 实例。只有vuex 数据流存在相关配置时可用
env Object 客户端 & 服务端 nuxt.config.js 中配置的环境变量，见 环境变量 api
params Object 客户端 & 服务端 route.params 的别名
query Object 客户端 & 服务端 route.query 的别名
req http.Request 服务端 Node.js API 的 Request 对象。如果 Nuxt 以中间件形式使用的话，这个对象就根据你所使用的框架而定。nuxt generate 不可用
res http.Response 服务端 Node.js API 的 Response 对象。如果 Nuxt 以中间件形式使用的话，这个对象就根据你所使用的框架而定。nuxt generate 不可用
redirect unction 客户端 & 服务端 用这个方法重定向用户请求到另一个路由。状态码在服务端被使用，默认 302 redirect([status,] path [, query])
error Function 客户端 & 服务端 用这个方法展示错误页：error(params) 。params 参数应该包含 statusCode 和 message 字段
nuxtState Object 客户端 Nuxt 状态，在使用 beforeNuxtRender 之前，用于客户端获取 Nuxt 状态，仅在 universal 模式下可用
beforeNuxtRender(fn) Function 服务端 使用此方法更新 __NUXT__ 在客户端呈现的变量，fn 调用 (可以是异步) { Components, nuxtState }
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. Nuxt 视图
    1. 1.1. 定制化默认的 html 模板
    2. 1.2. 布局
    3. 1.3. 错误页面
  2. 2. Nuxt 异步数据
    1. 2.1. asyncData 方法
    2. 2.2. 上下文对象 ctx