Nuxt学习--layouts router vuex

layout

layouts文件夹中写布局用的vue文件，通过<nuxt />来应用pages文件夹中的页面，页面中能配置layout对象来指定页面放入哪个布局

路由

• nuxt中的路由不需要手动配置，要放在pages文件夹下就会自动配置路由

  • 每个pages页面通过head函数来配置html的head中的标签，如title meta

• 路由见跳转使用<nuxt-link to=""></nuxt-link>来进行

• 和vue-router一样通过$router $route来控制路由

• 对于匹配路由，需要用文件夹代替固定路径下划线代替冒号

  • 如 test/:id应该在test文件夹下命名为_id.vue

• 二级路由：在一级路由下用<nuxt-child />引用二级路由的页面，通过建立与需要路由同名的文件夹，在文件夹下定义二级路由，index.vue为默认的显示页面

  • 因为二级引用需要有同名文件夹，所以index.vue不能有二级路由

  二级路由的文件格式：

  

状态管理

状态管理的配置在stroe文件夹下，新建一个index.js来配置。

• 每一项配置都要导出
• state必须是一个方法，该方法返回一个对象
• 在store文件夹下的每个js文件都会被作为一个vuex模块导入vuex，每个模块都使用了命名空间
  • index.js会被作为根导入
• 也可以将每个模块拆分为state getters ...来放入模块名的文件夹下来定义模块（这时每个js文件都用默认导出）