安装
配置
配置
主要包含了插件 、head 、css等一系列的配置选项，文档很详细不再赘述。
路由
路由
nuxt 的路由是不需要自己配置，创建文件夹和文件，系统会自己生成路由，只需要根据规则创建就可以了，
当我们需要创建传递参数的路由时我们需要给文件名前加上_（下划线）如果需要传递多个参数就需要嵌套多个带有下划线的文件夹
page
user
_uid
_id
index.vue
同时uid 和id就是他们的传递值的参数名 user就是我们的路由名称，此时打开这个路由，应该时这样的/user/123/5
路由参数检测
export default {
validate({ params }) {
// 必须是number类型
return /^\d+$/.test(params.id)
}
}
params里面就包含了我们传递路由里面的参数，如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。
默认布局
一般我们做网站渲染的时候，我们的头部和底部或者某些部位是固定在页面上不变化的，这个时候就可以用到默认布局，不需要我们在每个组件都引入一直存在的文件
可通过添加 layouts/default.vue 文件来扩展应用的默认布局
<div>
<Kheader />
<Nuxt />
<Kscrolltop />
</div>
<nuxt />就是我们切换路由更改 的部分，头部和底部就不会变化一直存在
如果我们需要定制多个默认布局的话，我们需要告诉页面使用自定义布局
例如我们在layouts创建一个blog文件
我们想让某个组件以blog这种方式进行默认显示，我们需要告诉组件
template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog' //布局方式名称
// page component definitions
}
</script>
我们可以通过编辑 layouts/error.vue 文件来定制化错误页面. 文档有详细解析
详细配置
异步数据 (asyncData)
https://www.nuxtjs.cn/guide/async-data
如果我们想要数据服务端渲染那个我们必须用asyncData去请求数据，这个模块中有配置axios建议使用官方文档的配置。
如果我们一个页面上有多个tab切换显示不同的数据，而且请求的接口都是不同的，这个时候我们可以一次请求所有的数据渲染页面，然后点击不同的tab显示不同的页面，也可以用路由的方式进行服务点渲染
asyncData接收一个上下文参数context,里面有许多参数，
asyncData里面是拿不到this实例的，所以在asyncData不要使用this
添加百度统计
第一步：登录百度统计官网获取统计代码
第二步：在nuxt项目中plugin目录下新建baidu.js文件
第三步： 在baidu.js文件中添加下面的代码
export default ({ app: { router }, store }) => {
router.afterEach((to, from) => {
/* 告诉增加一个PV */
try {
window._hmt = window._hmt || []
window._hmt.push(['_trackPageview', to.fullPath])
} catch (e) {}
})
}
第四步：在nuxt.config.js文件中添加下面的代码
在script标签中：
script: [
{ src: 'https://hm.baidu.com/hm.js?***' }
]
在plugins中：
plugins: [
{src: '~/plugins/baidu.js'}
]
持续探索中。。。。
网友评论