nuxt生命周期笔记

安装:
npx create-nuxt-app xx
切到创建的文件并启动:
npm run dev

nuxt生命周期

nuxt serverInit 服务器初始化时触发 在store下index.js nuxtServerInit(store,context){} 可用于用户判断等

参数1: vuex 上下文 vuex内容

参数2: nuxt 上下文

middleware 中间件 类似vue导航守卫
中间件执行流程顺序:
nuxt.config.js->匹配布局->匹配页面

全局配置：

nuxt.config.js进行配置
router:{
  middleware:"名称"
}
新建middleware目录 ==> 名称.js
文件中抛出一个函数
//store vuex中数据可以根据存的token来段写一些逻辑等
export default function({store,route,redirect,params,query,req,res}){
  
}

页面级别配置：

<template>
    <Tutorial/>
</template>
<script>
export default {
name:'IndexPage',
middleware:'auth' //在此配置 ，只在当前页面应用
}
</script>
//或者
<script>
export default {
name:'IndexPage',
middleware(){    //在此配置 ，只在当前页面应用
  
}
}
</script>

validate 校验参数 如校验数据判断进入哪个页面

//params 传递过来参数为跳转页面传递的参数 用于校验该参数
validate({params,query}){ 
return /^\d+$/.test(query.id) //id是否为正确的是正确的则正常不是则404
}

asyncData() 页面渲染前触发（限于页面组件，一般用于发起请求获取数据的）

<script>
export default {
name:'IndexPage',
asyncData({store,params}){    //在此配置
  
}
}
</script>

fetch() 页面渲染前触发 页面及组件都可使用 也是可以请求数据的

<script>
export default {
name:'IndexPage',
fetch({app,store,params}){    //在此配置
  
}
}
</script>

服务端和客户端共有的生命周期。beforeCreate,created,

客户端生命周期，和vue一致

Render 开始客户端渲染