# Nuxt.js
- 基于 Vue.js 生态的第三方开源服务端渲染应用框架
- 它可以帮助我们轻松的使用 Vue.js 技术栈构建同构应用
- 官网：https://zh.nuxtjs.org/
- GitHub 仓库：https://github.com/nuxt/nuxt.js
## 初始化一个 Nuxt
- npm i nuxt
- package.json 中设置 "dev" : "nuxt"
- 创建 pages 文件夹
- 创建 index.vue
## Nuxt.js 路由―路由导航
- a 标签
- 它会刷新整个页面，会走服务端渲染，不要使用。
- nuxt-link 组件
- https://routervuejs.org/zh/api/#router-link-props
- 与 router-link 用法基本相同
- 编程式导航
- https://router.vuejs.org/zh/guide/essentials/navigation.html
- @click = onClick
- this$router.push("/")
## Nuxt.js 动态路由
- 在文件或者文件夹的文件名前加上"_"，相当于/:
## Nuxt.js 配置文件
- nuxt.config.js
router:{
base:'/app' 更改初始路径
extendRoutes(routes,resolve){ 自己配置路径
routes.push({
name:'name',
path:'/name',
component: resolve(__dirname,'pages/name.vue')
})
}
}## 定制 html 模板
- 创建一个 app.html
<!DOCTYPE html>
<html {
{ HTML_ATTRS }}>
<head {
{ HEAD_ATTRS }}>
{
{ HEAD }}
</head>
<body {
{ BODY_ATTRS }}>
{
{ APP }} // 渲染的内容会注入到这里
</body>
</html>- 创建一个 layouts/default.vue 来扩展应用布局
<template>
<Nuxt /> 一定要记得留下 Nuxt 的页面出口
</template>
- 每个组件下有个 layout 属性，默认值 default
- 想要修改某个页面的 layout ，可以设置一个新的 layout
## Nuxt.js 异步数据 asyncData 方法
- https://zh.nuxtjs.org/guide/async-data
- 基本用法
- 它会将 asyncData 返回的数据融合组件 data 方法返回数据一并给组件
- 调用时机：服务端渲染期间和客户端路由更新之前
- 注意事项
- 只能在页面组件中使用
- ** 没有 this，因为它是在组件初始化之前被调用的
- Nuxt.js 中的 static 文件夹中可以直接通过地址访问内部文件
- 使用时不需要加上 static ：http://localhost:3000/data.json
- 在组件中使用 asyncData 方法获取数据之后返回一个对象，这个对象会和本来的 data 混入，相当于 data = Object.assign({}, asyncData, data)
- 非页面组件，如公共组建可以使用父组件给子组件传值的方法来使用
- ** 当你想要动态数据有利于 SEO 或者是提升首屏渲染速度的时候，就在 asyncData 中发送请求拿数据
** 如果是非异步数据或者普通数据，则正常初始化到 data 中即可
## Nuxt.js 上下文对象
- 由于 asyncData 中没有 this，于是 asyncData(context){console.log(context)};
- 使用传入上下文 context 来代替 this 的作用 : context.route.params 或者 context.params 获取 url 传值