現在大多數開發都是基于 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 文件編譯成路由，那么子路由需要使用文件夾嵌套才行。