在编写 Vue 应用的时候，要在应用里实现路由功能，需要安装 vue-router，在应用里创建路由器，再去定义需要的路由。在编写 Nuxt 应用的时候，我们不需要自己去创建路由，Nuxt 会根据我们在 pages 目录里创建的页面组件，自动帮我们生成需要的路由，这就是 Nuxt 框架的基于文件系统的路由功能。

项目根目录下的 pages 这个目录有特别的意义，它里面的东西可以看成是页面组件，或者叫路由组件，Nuxt 会根据文件还有目录的名字生成对应的路由。假设我们的应用需要一个内容列表页面，路由地址是 posts，这样就可以在这个 pages 目录的下面，新建一个名字是 posts 的组件。

新建一个文件，名字是 posts.vue ，设置一下组件的模板，一组 template，一组 div，里面添加一行文字，内容列表。这个组件对应的路由地址就是文件的名字，也就是 posts。

在浏览器访问一下 /posts，你会发现，显示的就是刚才创建的 posts 这个组件。

index

如果 posts 这个地址是其它路由的一部分，可以创建一个名字叫 posts 的目录，把这个 posts.vue 放在 posts 这个目录里面，然后把组件的文件名改成 index.vue。这样访问 posts 这个地址的时候默认显示的就是这个目录下的 index 组件。