nuxt学习笔记
官方文档
- nuxt英文文档
- nuxt中文文档
项目创建
安装
npx create-nuxt-app@2.15.0 my-nuxt-app
选择渲染模式 - Universal (SSR / SSG)
开发
npm run dev
打包与启动
npm run build
npm run start
nuxt生命周期
-
nuxtServerInit
在store中，用于初始化数据 -
middleware
中间件执行流程顺序：
nuxt.config.js->匹配布局->匹配页面 -
validate
参数校验、校验失败，则自动跳转到404 error页面 -
asyncData,fetch
异步数据获取，数据在页面渲染前获取，数据获取失败，则自动跳转到404 error页面 -
beforeCreate,created
在ssr和csr中，都会执行 -
vue的生命周期钩子函数
路由
约定式
-
展示区：
<nuxt /> -
声明式跳转：
<nuxt-link :to="{name:'product-id',params:{id:123},query:{a:1}}">product</nuxt-link>name: 路由名称（目录名->其他目录名->文件名）params: 路由参数，key值与文件名（路由参数名）一致
-
子路由
目录代表子路由，子路由内部同级的文件，代表是同级路由 -
展示区的层级控制
pages/一级展示/二级展示 /index.vue 会在一级展示 /index.vue 空文档 代表有默认页，不会找寻其他 _other-page-详情.vue
这是一个 路由映射表结构，用于展示 URL 路径（PATH）与对应 Vue 组件文件（FILE）的关联关系，常见于 Vue 路由配置场景（如 Vue Router），核心逻辑是：
1. 静态路径匹配
/路径 → 对应根目录下的index.vue，一般是应用首页组件/goods路径 → 对应goods目录下的index.vue，通常是商品列表页等一级路由
2. 动态路由匹配
/goods/123路径 → 对应goods/_id.vue，_id是动态路由参数（如商品 ID），可通过$route.params.id在组件内获取123这类实际参数值
3. 嵌套/子路由匹配
/goods/comment路径 → 对应goods/comment.vue，作为/goods路径的子路由，可在goods/index.vue中用<router-view>渲染该评论组件
简单说，就是 URL 路径规则 → Vue 组件文件 的映射关系表，帮你理解前端路由如何根据不同 URL 渲染对应页面。
扩展路由
nuxt.config.js->router->extendRoutes
router: {extendRoutes(routes, resolve) {routes.push({name: 'custom',path: '/custom',component: resolve(__dirname, 'pages/custom.vue')})}
}
路由守卫
前置
依赖中间件
middleware或者是插件
中间件middleware执行顺序：
nuxt.config.js(middleware目录下)->匹配布局layouts(定义中间件)->匹配页面（页面级别中间件）
使用插件前置路由守卫：nuxt.config.js->plugins->router->beforeEach
使用插件后置路由守卫：nuxt.config.js->plugins->router->afterEach
后置
使用vue的
beforeRouteLeave钩子函数
使用插件后置路由守卫：nuxt.config.js->plugins->router->afterEach
数据交互
安装nuxt集成的axios
npm install @nuxtjs/axios@5.9.7 @nuxtjs/proxy@1.3.3 --save
如何在nuxt项目中使用axios进行网络请求？
loading页配置与定制
nuxt.config.js->loading配置loading颜色、loading组件、loading显示时间、loading显示位置等
vuex定义与使用
如何在nuxt项目中使用vuex?
状态持久化与token校验
- 安装:cookie-universal-nuxt
- 思想:登录时，同步vuex && cookie，强制刷新后,nuxtserverInit钩子，取出cookies，同步vuex，axios拦截器读取vuex中的token，进行token校验
- 如何在nuxt项目中使用cookie-universal-nuxt进行状态持久化和token校验?