nuxt学习篇-01-目录和路由

1.nuxt的目录介绍

• .nuxt文件夹：(nuxt.js build output)nuxt自动生成的，临时的用于编辑的文件
• assets文件夹: 存放未编译的静态资源譬如less,sass或javascript。
• components： 放置vue组件,这些组件不会像页面组件那样有asyncData方法的特性
• layouts: 组织应用的布局组件。
• middleware: 放置应用所需的中间件（中间件允许定义一个自定义函数运行在一个页面或一组页面渲染之前）
• pages: 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
• plugins: 组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
• static: 存放应用的静态资源文件， 该目录下的文件不会被webpack编译处理。
• store: 管理vuex状态
• .env：（这个文件不是必须的）设置环境变量的参数，可以通过process.env.参数名进行获取。
• .gitignore: 设置不需要提交到git上面的文件
• nuxt.config.js: 用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
• package.json: npm包管理的配置文件
• pageage.lock.json：指定npm包的具体版本，以达到统一

2.nuxt的路由:
路由组件：nuxt-link

• 动态路由:
  定义带参数的路由，需要创建以下划线为前缀的目录名或vue文件名
  例如：
  
  index.vue文件：（test后面跟的就是参数)
  
  动态路由对应的vue文件：

validate（路由参数校验）函数校验页面是否符合规则，若符合返回true 符合可以访问正常的页面，不符合会跳转至错误页面。

动态路由匹配的页面：

若没匹配到，会进入错误页面(该页面可以自己配置，也可以使用默认的）

• 嵌套路由
  创建嵌套子路由，需要创建一个vue文件（在该vue文件中添加 nuxt-child用于显示子路由视图），并创建一个与该vue文件同名的目录（用于放子视图的组件)
  
  

路由相关参考链接： https://www.nuxtjs.cn/guide/routing