创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。在父级 Vue 文件内增加 <nuxt-child/> 用于显示子视图内容。
4）布局
Nuxt.js布局方式如下图所示：
layouts对应目录中的layouts文件夹，默认pages下的页面走的都是 layouts/default.vue 布局方式，如下图。其中<nuxt/>可以类似vue中slot插槽的概念，pages/**.vue中的内容会插在<nuxt/>内。
此外，如果想要某一页面，不走默认布局方式，可以在vue文件中配置layouts，如下。
<script> export default { layout: 'demo_layout', ... } </script>
5）vuex
在根目录创建 store 目录，就会默认引用 vuex 模块，除此之外，还进行了以下的操作：1）将 vuex 模块 加到 vendors 构建配置中去；2）设置 Vue 根实例的 store 配置项。
Nuxt.js 支持两种使用 store 的方式：
普通方式：store/index.js 返回一个 Vuex.Store 实例
模块方式：store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块，相当于设置了namespaced: true)
Nuxt.js提供了模块方式的简单写法：使用状态树模块化的方式，store/index.js 不需要返回 Vuex.Store 实例，直接将 state、mutations 和 actions 暴露出来即可。示例如下：
export const state = () => ({ accesstoken: '' }) export const mutations = { setAccesstoken (state, accesstoken) { state.accesstoken = accesstoken } }
6）异步数据 asyncData
Nuxt.js 增加了一个 asyncData 方法，用于 在设置组件数据 之前 能够异步获取 或 处理数据。
由于 asyncData 是在组件 初始化 之前被调用的，所以不能通过 this 引用组件的实例对象，可以使用上下文对象来实现某些功能，可参考 context api
示例🌰：
asyncData (params) { let accesstoken = params.route.query.accesstoken // request 基于 axios 封装的函数 return request({ url: '/drivers/banks', method: 'get', headers: { accesstoken } }) .then(res => { let { bankInfo } = res.data return { banksData: bankInfo, accesstoken } }) .catch(err => { return error({ message: 'accesstoken not found', statusCode: 404 }) }) }
上述代码，会在 组件初始化 之前，请求'/drivers/banks'接口，接口返回的数据会 融合在 data 中，一并返回模版显示。在浏览器中，使用Vue DevTools可以清晰的查看到 banksData, accesstoken 都在data中。
在调试中发现，刷新页面时，该请求是在服务端发送的，由其他页面回退到该页面时，请求是在客户端发送的。
7）fecth方法
与 asyncData 方法类似，不同的是它不会设置组件的数据，作用是设置 store 数据。
五、总结本项目在开发中，使用的是 1.0.0-rc9 版本，我们正在积极尝试迁移到 1.0.0 正式版本。但是，1.0.0-rc9 版本，未见明显问题，比较稳定，足以投入到生产中。
本文主要介绍 Nuxt.js 的特性，后面还会和大家分享踩的坑。文中有任何表述不清或不当的地方，欢迎大家批评指正。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: