nuxt相对应Vue的扩展
nuxt在vue2的基础上，扩展了vue的prototype，增加了asyncData和fetch方法；其次简单说下layout和keep-alive在nuxt中的用法
asyncData
当我们需要在服务端就把数据获取到，从而渲染好的话，就需要使用asyncData
asyncData会在页面组件（pages目录下的组件）每次加载之前被调用，可以在服务端或者路由更新之前被调用。
注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
使用方法：
// ctx对象详细看官网https://www.nuxtjs.cn/api/context
async asyncData(ctx) {
const { data } = await FriendBlogService.getFriendBlog()
return {
friendBlogList: data,
}
},
data() {
return {
minHeight: '150',
friendBlogList: [],
}
},
Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件
fetch
如果页面组件设置了 fetch 方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前）。如asyncData一致
fetch 方法的第一个参数是页面组件的上下文对象 context，我们可以用 fetch 方法来获取数据填充应用的状态树。为了让获取过程可以异步，你需要返回一个 Promise，Nuxt.js 会等这个 promise 完成后再渲染组件。
注: 与asyncData一样，无法在内部使用this获取组件实例，fetch是在组件初始化之前被调用
使用方法：
<template>
<h1>Stars: {{ $store.state.stars }}</h1>
</template>
<script>
export default {
async fetch({ store, params }) {
let { data } = await axios.get('http://my-api/stars')
store.commit('setStars', data)
}
}
</script>
asyncData与fetch的区别
fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。
asyncData返回的值是会与组件的data融合，而fetch一般返回一个Promise,组件会等到这个promise完成之后才会渲染
在nuxt中使用keep-alive
官方给的例子是这样的,在layouts下的组件加上keep-alive,keepAliveProps里面传入平常keep-alive的属性，如include和exclude
<nuxt keep-alive :keepAliveProps="{include:/list/i}"/>
但是我试了一下好像没什么效果，可能是哪里没写对？ 然后我在组件中照常使用就可以了
<div class="main-container" >
<keep-alive exclude="BlogDetail">
<router-view />
</keep-alive>
</div>
注意：include和exclude对应的是组件的name，要一一对应上才生效
动态路由配合asyncData
在nuxt中路由都是自动创建的，所以要使用动态路由的话，文件名要以_下划线开头，比如博客的详情页，路径为:/detail?id=1
在pages目录下建一个detail文件夹，然后建一个文件名为_id.vue的文件,配合asyncData
async asyncData({ query }) {
const { data } = await BlogService.getBlogDetail(query.id)
return {
blog: data,
blogHtml: marked(data.content),
}
}
注：如果使用了keep-alive会出现id变化了，页面没刷新的情况，这时候在keep-alive把该页面exclude了即可，或者采用watchQuery的方式监听query参数改变
watchQuery 属性
监听参数字符串更改并在更改时执行组件方法 (asyncData, fetch, validate, layout, ...)
使用watchQuery属性可以监听参数字符串的更改。 如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, ...)。 为了提高性能，默认情况下禁用。
如果您要为所有参数字符串设置监听， 请设置： watchQuery: true.
export default {
watchQuery: ['page']
}
