nuxt 自定义布局、错误页面、组件额外方法、context上下文对象

缺乏、安全感 2021-07-24 13:36 763阅读 0赞

1、自定义布局
    	使用layouts中的顶级文件布局
    	
    	(1)在放置进布局的组件中,data同级
    		layout: 'layouts中的顶级文件名称,无.vue后缀'
    		
    	(2)在layouts中的顶级文件中
    		<Nuxt /> 标注组件放置位置
    
    2、在layouts中创建error.vue
    	显示应用错误（404，500 等）的组件
    
    3、组件额外添加的方法asyncData,和data同级,用于请求获取数据
    	 (1)asyncData方法会在组件每次加载之前被调用.它可以在服务端或路由更新之前被调用.
    	 (2)第一个参数被设定为当前页面的上下文对象
    	 (3)asyncData返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
    	 (4)由于asyncData方法是在组件初始化前被调用的,无this
    	 (5)因为是先于组件之前被调用,所以首屏的console.log是在服务器端打印,而不是页面,其他屏的会在页面打印
    	
    	1、返回Promise
    	
    		nuxt.js会等待该Promise被解析之后才会设置组件的数据,从而渲染组件
    		  asyncData({ params }) {
    		    return axios.get('xx').then(res => {
    		      return { xx }
    		  })
    		  
    	2、async和await
    	
    		  async asyncData({ params }) {
    		    const x = await axios.get(`xx`)
    		    return { xxx:x }
    		  }
    	3、callback
    		
    		 async asyncData(context,callback) {
    		    	callback(null,{ 键值对 })
    		  }
    
    4、组件额外方法
    	asyncData	最重要的一个键, 支持 异步数据处理，另外该方法的第一个参数为当前页面组件的 上下文对象。
    	fetch		与 asyncData 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 fetch 方法不会设置组件的数据。详情请参考 关于 fetch 方法的文档。
    	head		配置当前页面的 Meta 标签, 详情参考 页面头部配置 API。
    	layout		指定当前页面使用的布局（layouts 根目录下的布局文件）。详情请参考 关于 布局 的文档。
    	loading		如果设置为false，则阻止页面自动调用this.$nuxt.$loading.finish()和this.$nuxt.$loading.start(),您可以手动控制它,请看例子,仅适用于在 nuxt.config.js 中设置loading的情况下。请参考API 配置 loading 文档。
    	transition	指定页面切换的过渡动效, 详情请参考 页面过渡动效。
    	scrollToTop	布尔值，默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于 嵌套路由的应用场景。
    	validate	校验方法用于校验 动态路由的参数。
    	middleware	指定页面的中间件，中间件会在页面渲染之前被调用， 请参考 路由中间件。
    
    5、context上下文对象属性
    
    属性字段		类型			可用				描述
    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	Function	客户端 & 服务端	用这个方法重定向用户请求到另一个路由。状态码在服务端被使用，默认 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 } ，参考 示例