分享：nuxt页面

最新推荐文章于 2024-06-19 14:02:56 发布

万花丨凋

最新推荐文章于 2024-06-19 14:02:56 发布

阅读量352

点赞数

分类专栏： nuxt vue 文章标签：中间件 vue html

本文链接：https://blog.youkuaiyun.com/awseda/article/details/106373392

版权

nuxt 同时被 2 个专栏收录

45 篇文章

订阅专栏

vue

39 篇文章

订阅专栏

本文介绍了Nuxt.js页面组件的特殊配置项，包括asyncData、fetch、head、layout、loading、transition、scrollToTop、validate和middleware。这些配置帮助开发者实现异步数据处理、页面元信息配置、布局选择、过渡效果等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面

页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项（对应 Nuxt.js 提供的功能特性）以便你能快速开发通用应用。
观看Vue School出品的 Nuxt.js 页面组件的免费课程

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
export default {
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  },
  head () {
    // Set Meta Tags for this Page
  },
  // and more functionality to discover
  ...
}
</script>

<style>
.red {
  color: red;
}
</style>

Nuxt.js 为页面提供的特殊配置项：
属性名描述
asyncData——最重要的一个键, 支持异步数据处理，另外该方法的第一个参数为当前页面组件的上下文对象。
fetch ——与 asyncData 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 fetch 方法不会设置组件的数据。详情请参考关于fetch方法的文档。
head——配置当前页面的 Meta 标签, 详情参考页面头部配置API。
layout——指定当前页面使用的布局（layouts 根目录下的布局文件）。详情请参考关于布局的文档。
loading——如果设置为false，则阻止页面自动调用this. $n u x t .$ loading.finish()和this. $n u x t .$ loading.start(),您可以手动控制它,请看例子,仅适用于在nuxt.config.js中设置loading的情况下。请参考API配置 loading 文档。
transition——指定页面切换的过渡动效, 详情请参考页面过渡动效。
scrollToTop——布尔值，默认: false。用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于嵌套路由的应用场景。
validate——校验方法用于校验动态路由的参数。
middleware——指定页面的中间件，中间件会在页面渲染之前被调用，请参考路由中间件。
关于页面配置项的详细信息，请参考页面 API。
——————————————————————————————————————————————
链接参考：
1.https://vueschool.io/lessons/nuxtjs-page-components?friend=nuxt
2.https://zh.nuxtjs.org/guide/async-data
3.https://zh.nuxtjs.org/api#%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1
4.https://zh.nuxtjs.org/api/pages-fetch
5.https://zh.nuxtjs.org/api/pages-head
6.https://zh.nuxtjs.org/api/pages-layout
7.https://zh.nuxtjs.org/api/configuration-loading
8.https://zh.nuxtjs.org/api/pages-transition
9.https://zh.nuxtjs.org/guide/routing#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1
10.https://zh.nuxtjs.org/guide/routing#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1
11.https://zh.nuxtjs.org/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6
12.https://zh.nuxtjs.org/api