Nuxt学习--生命周期

生命周期

Nuxt学习--生命周期

validate

用来校验动态路由参数的有效性。

在该生命周期内可以访问this.methods

该生命周期必须返回一个布尔值或者包装了布尔值的Promise,如果为false会跳转进layouts/error.vue

使用context.params.xxx来验证路径

asyncData

nuxt中新增的生命周期,在这里获得异步数据,然后将数据提交给服务端,在服务端拼接好html后发送给客户端,一般写成异步函数。该生命周期在beforeCreate前调用,同样在服务器端调用,类似setup所以不能使用this window document

主要用来请求重要数据,其它不重要请求可以写进客户端

asyncData返回一个对象,和data一样用来渲染页面。

asyncData接收一个上下文参数,里面含有多个对象和方法。

  • error:该函数接收两个属性的对象 statusCode message表示状态码和错误信息,调用会将当前页面替换为layouts中的error.vue
  • store:vuex
  • redirect:类似$router,用来在服务器端跳转路由
  • query params:该页面路由的query params
  • app:

fetch

该方法用于在渲染页面前填充store,它不能返回数据。

watchQuery

该对象属性可以是字符串或字符串组,设置监听的路由query部分,如果发生变化则会重新触发asyncData fetch等生命周期钩子。

返回一个对象用来设置<head>标签内的标签。在nuxt.config.js中能设置全局的标签

上一篇:浅析Preload/Prefetch性能优化


下一篇:24-Vue中的$attrs和inheritAttrs