现在大多数开发都是基于 Vue 或者 React 开发的，能够达到快速开发的效果，也有一些不足的地方, Nuxt 能够在服务端做出渲染，然后让搜索引擎在爬取数据的时候能够读到当前页面。
首先要说明一点，我们可以认为我们所编写的 Vue 项目是一个服务端的项目，虽然编写的还是 Vue 项目，但是 Nuxt 是基于服务器环境的。
就简单的说一下 Nuxt 使用。基础只是还是以官方文档为主，如果博客中哪里有问题，欢迎留言指正。
说了这么多，进入正题。
路由
与传统的 Vue 项目不同的是，我们在使用 Vue 的时候需要配置 Vue-Router 信息，在 Nuxt 有很关键的一点就是 约定优于配置 。 page 目录下的所有 *.vue 文件会自动生成路由配置。
在项目初始化之后，在 pages 下面默认有一个 index.vue 文件，所以当我们使用 npm run dev 启动项目，并且使用 :3000/ 访问的时候能够正常访问路由。
为了证实上面这一点，在 pages 下面创建一个信息 about.vue 文件，并且 :3000/about 去访问刚刚写的页面。我们可以按照正常的 Vue 页面去开发就好了。
page目录
├─page │ ├─index.vue └───└─about.vue
about.vue
<template> <div> <h2>This About</h2> </div> </template>
创建完成之后使用 :3000/about 访问该页面，页面能够正常的渲染出来了。就会看到 This About 显示在页面中。
做到这一步之后就应该实现路由之间的跳转了。 Vue 开发过程中，都是使用 router-link 标签完成路由之间的跳转，在 Nuxt 也同样可以使用 router-link ，但是 Nuxt 仍然推荐使用 nuxt-link , nuxt-link 与 router-link 的功能是等效的。
可能会有一些疑问，既然是等效的，为什么要使用 nuxt-link 呢？官方文档中是这样说的：将来我们会为 nuxt-link 组件增加更多的功能特性，例如资源预加载，用于提升 nuxt.js 应用的响应速度。显然嘛，官方不会无缘无故的就做出这么一个东西来，肯定实在其中做了很多的优化工作的。
稍微的改动一下刚才的 about.vue 在里面添加两个标签，一个使用 nuxt-link ，一个使用 router-link 看下能否正常完成跳转。
about.vue - 更改后
<template> <div> <h2>This About</h2> <nuxt-link to="https://www.jb51.net/">首页</nuxt-link> <router-link to="https://www.jb51.net/">首页</router-link> </div> </template>
既然从路由开始那么就不得不说到子路由，全局路由守卫这些都些在路由中经常用到的应该怎么处理？该怎么解决这些问题。
前面既然说到了 Nuxt 会把 pages 文件夹下面的所有 *.vue 文件编译成路由，那么子路由需要使用文件夹嵌套才行。
接下来就尝试一下。首先要更改一下 pgeas 目录结构。
page目录
├─page │ ├─about │ │ ├─detail.vue │ │ └─index.vue └───└─index.vue
注意上面的 about 目录，是 index.vue 而并非 about.vue ，这里的 index.vue 指的是 about 路由下的首页，也就是最开始放在与 index.vue 同级的那个 about.vue 是一样的效果。
about/index.vue
<template> <div> <h2>This About</h2> <nuxt-link to="https://www.jb51.net/">首页</nuxt-link> <router-link to="https://www.jb51.net/">首页</router-link> </div> </template> about/detail.vue <template> <div> <h2>This Detail</h2> </div> </template>
现在如果我们想要访问刚才的那两个路由地址分别就是 :3000/about 和 :3000/about/detail 就能看到刚才编写的 page 页面了。
如果想要看路由生成到底是什么样子的？可以在根目录下有一个 .nuxt 文件夹，在里面可以看到一个 router.js ,这个文件夹下面就是 Nuex 生成好的路由信息。
打开文件后翻到最后会有一段这样的代码，是不是很眼熟？这是不就是在编写 Vue 项目的时候配置的哪些路由文件么？
router.js
export function createRouter() { return new Router({ mode: 'history', base: decodeURI('https://www.jb51.net/'), linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/about", component: _9ceb4424, name: "about" }, { path: "/about/detail", component: _18146f65, name: "about-detail" }, { path: "https://www.jb51.net/", component: _d3bf5a4e, name: "index" }], fallback: false }) }
有了这个文件的话我们就可以清楚的知道，路由的结构了。不仅仅这样，还可以使用 name 去实现路由的跳转了。