526互联

nuxt.js 框架

发布时间 2023-03-30 13:13:21作者: 前端_实习生

 

目录结构

　　pages  　　　　:存放页面

　　　　　　类似于src/views

　　components  　 :存放组件

　　　　　　类似于src/components

　　static　　　　　:存放静态页

　　　　　　类似于src/assets

　　store　　　　　:vuex状态树

　　　　　　类似于src/store

　　nuxt.config.js　  :全局配置文件

　　　　　　类似于vue.config.js

生命周期

　　一、服务端的生命周期

　　　　　　1.　nuxtServerInit(store,context)　{}

　　　　　　　如果使用了Vuex，这就是在服务端第一个被调用的生命周期钩子

　　　　　　　第一个参数：vuex的上下文

　　　　　　　第二个参数：nuxt的上下文

　　　　　　2.　中间件　middleware

　　　　　　　　参数：{(store,route,query,redirect,params,req,res)}

　　　　　　　　全局：　　在nuxt.config.js中定义的中间件被称为全局中间件，可以在这里进行全局的路由守卫

　　　　　　　　先在目录创建  middleware  再在里面新建一个js文件名称和nuxt.config.js里配置的一样

　　　　　　　　nuxt.config.js进行配置

　　　　　　　　router:{

　　　　　　　　middleware:' js文件名称'

　　　　　　　　}

　　　　　　　   局部:    　在pages里的页面里配置

　　　　　　　　

<script>
export default {
  middleware:'bath',
}
</script>
<script src="文件名称"></script>

　　　　　　　　也可以直接像函数这种格式写

<script>
export default {
  middleware（）{
        (文件名称)
    },
}
</script>

　　　　　　3.validate 校验传递的参数是否正确

　　　　　　return 如果是true就校验通过反之false就

export default {
  validate ({ params, query }) {
    console.log(query.id, '获取query参数');
    // 如果是true就获取到反之false就跳转'找不到该页面'
    return /^\d+$/.test(query.id)
  }

}

 

 

知识点

　　nuxt.config.js里面可以修改是否可以直接使用组件不需要引入