Nuxt

官方文档给出的为什么选择nuxt

Nuxt原理

前端路由沿用了history模式，通过history.pushState更改URL，进而局部渲染组件。

history router的实现思路是:监听页面中和路由有关的a标签点击事件，阻止默认的跳转行为，然后调用history.pushState方法，让浏览器记住路由，然后手动更新相应视图。同时为了监听用户手点浏览器的前进后退按钮，还需要监听popstate事件，动态的修改相应视图。

Nuxt自录结构

Nuxt流程

1、当用户访问应用程序,如果store中定义了nuxtServerlnit action,Nuxt.js将调用它更新store。

2将加载即将访问页面所依赖的任何中间件。Nuxt首先从nuxt.config.js这个文件中，加载全局依赖的中间件,之后检测每个相应页面对应的布局文件，最后，检测布局文件下子组件依赖的中间件。以上是中间件的加载划项序。

3、如果要访问的路由是一个动态路由,且有一个相应的validate)方法路由的validate方法,讲进行路由校验。

4、Nuxt.js调用asyncData)和fetch()方法，在渲染页面之前加载异步数据。asyncData0方法用于异步获取数据，并将fetch回来的数据，在服务

端渲染到页面。用fetch0方法取回的将数据在渲染页面之前填入store。最后一步,将所有数据渲染到页面。

异步数据

Nuxt.js扩展了Vue.js,增加了一个叫asyneData的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData方法会在组件（限于页面组待）每次加载之前被调用。

它可以在服务端或路由更新之前被调用。

在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象。你可以利用asyncData方法来获取数据，Nuxt.js会将asyncData返回的数据融合组件data方法返回数据一并返回给当前组件。