服务端预渲染之Nuxt(使用篇)

现在大多数开发都是基于 Vue 或者 React 开发的，能够达到快速开发的效果，也有一些不足的地方, Nuxt 能够在服务端做出渲染，然后让搜索引擎在爬取数据的时候能够读到当前页面。

首先要说明一点，我们可以认为我们所编写的 Vue 项目是一个服务端的项目，虽然编写的还是 Vue 项目，但是 Nuxt 是基于服务器环境的。

就简单的说一下 Nuxt 使用。基础只是还是以官方文档为主，如果博客中哪里有问题，欢迎留言指正。

说了这么多，进入正题。

路由

与传统的 Vue 项目不同的是，我们在使用 Vue 的时候需要配置 Vue-Router 信息，在 Nuxt 有很关键的一点就是 约定优于配置 。 page 目录下的所有 *.vue 文件会自动生成路由配置。

在项目初始化之后，在 pages 下面默认有一个 index.vue 文件，所以当我们使用 npm run dev 启动项目，并且使用 http://localhost:3000/ 访问的时候能够正常访问路由。

为了证实上面这一点，在 pages 下面创建一个信息 about.vue 文件，并且 http://localhost:3000/about 去访问刚刚写的页面。我们可以按照正常的 Vue 页面去开发就好了。

page目录

├─page│ ├─index.vue└───└─about.vue

about.vue

<template> <div>  <h2>This About</h2> </div></template>

创建完成之后使用 http://localhost: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="/">首页</nuxt-link>  <router-link to="/">首页</router-link> </div></template>

既然从路由开始那么就不得不说到子路由，全局路由守卫这些都些在路由中经常用到的应该怎么处理？该怎么解决这些问题。

前面既然说到了 Nuxt 会把 pages 文件夹下面的所有 *.vue 文件编译成路由，那么子路由需要使用文件夹嵌套才行。