服務(wù)端預(yù)渲染之Nuxt(使用篇)

現(xiàn)在大多數(shù)開(kāi)發(fā)都是基于 Vue 或者 React 開(kāi)發(fā)的，能夠達(dá)到快速開(kāi)發(fā)的效果，也有一些不足的地方, Nuxt 能夠在服務(wù)端做出渲染，然后讓搜索引擎在爬取數(shù)據(jù)的時(shí)候能夠讀到當(dāng)前頁(yè)面。

首先要說(shuō)明一點(diǎn)，我們可以認(rèn)為我們所編寫(xiě)的 Vue 項(xiàng)目是一個(gè)服務(wù)端的項(xiàng)目，雖然編寫(xiě)的還是 Vue 項(xiàng)目，但是 Nuxt 是基于服務(wù)器環(huán)境的。

就簡(jiǎn)單的說(shuō)一下 Nuxt 使用?；A(chǔ)只是還是以官方文檔為主，如果博客中哪里有問(wèn)題，歡迎留言指正。

說(shuō)了這么多，進(jìn)入正題。

路由

與傳統(tǒng)的 Vue 項(xiàng)目不同的是，我們?cè)谑褂?Vue 的時(shí)候需要配置 Vue-Router 信息，在 Nuxt 有很關(guān)鍵的一點(diǎn)就是 約定優(yōu)于配置 。 page 目錄下的所有 *.vue 文件會(huì)自動(dòng)生成路由配置。

在項(xiàng)目初始化之后，在 pages 下面默認(rèn)有一個(gè) index.vue 文件，所以當(dāng)我們使用 npm run dev 啟動(dòng)項(xiàng)目，并且使用 http://localhost:3000/ 訪問(wèn)的時(shí)候能夠正常訪問(wèn)路由。

為了證實(shí)上面這一點(diǎn)，在 pages 下面創(chuàng)建一個(gè)信息 about.vue 文件，并且 http://localhost:3000/about 去訪問(wèn)剛剛寫(xiě)的頁(yè)面。我們可以按照正常的 Vue 頁(yè)面去開(kāi)發(fā)就好了。

page目錄

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

about.vue

<template>
 <div>
  <h3>This About</h3>
 </div>
</template>

創(chuàng)建完成之后使用 http://localhost:3000/about 訪問(wèn)該頁(yè)面，頁(yè)面能夠正常的渲染出來(lái)了。就會(huì)看到 This About 顯示在頁(yè)面中。

做到這一步之后就應(yīng)該實(shí)現(xiàn)路由之間的跳轉(zhuǎn)了。 Vue 開(kāi)發(fā)過(guò)程中，都是使用 router-link 標(biāo)簽完成路由之間的跳轉(zhuǎn)，在 Nuxt 也同樣可以使用 router-link ，但是 Nuxt 仍然推薦使用 nuxt-link , nuxt-link 與 router-link 的功能是等效的。

可能會(huì)有一些疑問(wèn)，既然是等效的，為什么要使用 nuxt-link 呢？官方文檔中是這樣說(shuō)的：將來(lái)我們會(huì)為 nuxt-link 組件增加更多的功能特性，例如資源預(yù)加載，用于提升 nuxt.js 應(yīng)用的響應(yīng)速度。顯然嘛，官方不會(huì)無(wú)緣無(wú)故的就做出這么一個(gè)東西來(lái)，肯定實(shí)在其中做了很多的優(yōu)化工作的。

稍微的改動(dòng)一下剛才的 about.vue 在里面添加兩個(gè)標(biāo)簽，一個(gè)使用 nuxt-link ，一個(gè)使用 router-link 看下能否正常完成跳轉(zhuǎn)。

about.vue - 更改后

<template>
 <div>
  <h3>This About</h3>
  <nuxt-link to="/">首頁(yè)</nuxt-link>
  <router-link to="/">首頁(yè)</router-link>
 </div>
</template>

既然從路由開(kāi)始那么就不得不說(shuō)到子路由，全局路由守衛(wèi)這些都些在路由中經(jīng)常用到的應(yīng)該怎么處理？該怎么解決這些問(wèn)題。

前面既然說(shuō)到了 Nuxt 會(huì)把 pages 文件夾下面的所有 *.vue 文件編譯成路由，那么子路由需要使用文件夾嵌套才行。

接下來(lái)就嘗試一下。首先要更改一下 pgeas 目錄結(jié)構(gòu)。

page目錄

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

注意上面的 about 目錄，是 index.vue 而并非 about.vue ，這里的 index.vue 指的是 about 路由下的首頁(yè)，也就是最開(kāi)始放在與 index.vue 同級(jí)的那個(gè) about.vue 是一樣的效果。

about/index.vue

<template>
 <div>
  <h3>This About</h3>
  <nuxt-link to="/">首頁(yè)</nuxt-link>
  <router-link to="/">首頁(yè)</router-link>
 </div>
</template>
about/detail.vue
<template>
 <div>
 <h3>This Detail</h3>
 </div>
</template>

現(xiàn)在如果我們想要訪問(wèn)剛才的那兩個(gè)路由地址分別就是 http://localhost:3000/about 和 http://localhost:3000/about/detail 就能看到剛才編寫(xiě)的 page 頁(yè)面了。

如果想要看路由生成到底是什么樣子的？可以在根目錄下有一個(gè) .nuxt 文件夾，在里面可以看到一個(gè) router.js ,這個(gè)文件夾下面就是 Nuex 生成好的路由信息。

打開(kāi)文件后翻到最后會(huì)有一段這樣的代碼，是不是很眼熟？這是不就是在編寫(xiě) Vue 項(xiàng)目的時(shí)候配置的哪些路由文件么？

router.js

export function createRouter() {
 return new Router({
 mode: 'history',
 base: decodeURI('/'),
 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: "/",
  component: _d3bf5a4e,
  name: "index"
 }],
 fallback: false
 })
}

有了這個(gè)文件的話我們就可以清楚的知道，路由的結(jié)構(gòu)了。不僅僅這樣，還可以使用 name 去實(shí)現(xiàn)路由的跳轉(zhuǎn)了。

需要注意的是，如果你的路由是有文件夾嵌套的話， Nuxt 是用使用 - 來(lái)拼接路由的 name 名稱(chēng)的(如: about-detail )，但是文件夾內(nèi)部的 index.vue 會(huì)直接已文件夾的名字作為 name 。一旦知道了路由的 name ，這樣我們就可以使用命令的方式跳轉(zhuǎn)路由了。

再次更改一下 about/index.vue 。

about/index.vue

<template>
 <div>
  <h3>This About</h3>
  <nuxt-link :to="{name:'about-detail'}">詳情</nuxt-link>
  <router-link :to="{name:'index'}">首頁(yè)</router-link>
  <button @click="onClick">跳轉(zhuǎn)到詳情</button>
 </div>
</template>
<script>
export default {
 methods: {
 onClick() {
  this.$router.push({name:"about-detail"})
 }
 }
}
</script>

使用路由訪問(wèn) http://localhost:3000/about 地址，分別點(diǎn)擊詳情、首頁(yè)與 button ，都是能夠正常跳轉(zhuǎn)的，與之前的 Vue 開(kāi)發(fā)是完全沒(méi)有任何區(qū)別的。在 vue-router 中有一個(gè)很重要的一個(gè)點(diǎn)就是 動(dòng)態(tài)路由 的概念，如果想要實(shí)現(xiàn)動(dòng)態(tài)路由應(yīng)該怎么處理呢？

如果想要在 Nuxt 中使用動(dòng)態(tài)路由的話，需要在對(duì)應(yīng)的路由下面添加一個(gè) _參數(shù)名.vue 的文件，在 about 文件下面添加一個(gè) _id.vue

page目錄

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

新建完成之后在去 router.js 中看一下更改后的路由結(jié)構(gòu)

export function createRouter() {
 return new Router({
 mode: 'history',
 base: decodeURI('/'),
 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: "/about/:id",
  component: _6b59f854,
  name: "about-id"
 }, {
  path: "/",
  component: _d3bf5a4e,
  name: "index"
 }],
 fallback: false
 })
}

可以明顯的看到在 /about/:id 這個(gè)路由，明顯的變化不止這些變動(dòng)的還有 name: "about-id" 不再是之前的 name:about 了。如果想要使用這個(gè) id 的話必須在 _id.vue 中才能獲取到。

**_id.vue**

<template>
 <div>
 {{$route.params.name}}
 {{$route.params.id}}
 </div>
</template>

在 _id.vue 中編寫(xiě)以上代碼并使用 http://localhost:3000/about/ABC ,可以看到在頁(yè)面中已經(jīng)展示了當(dāng)前的 id 值。

在實(shí)際開(kāi)發(fā)過(guò)程當(dāng)中可能 params 可能會(huì)有多個(gè)參數(shù)，又應(yīng)該怎么處理呢？

調(diào)整目錄結(jié)構(gòu)

// id為可選參數(shù)
├─page
│ ├─about
│ │ ├─_name
| | | └─_id
| | |  └─index.vue
│ │ └─index.vue
└───└─index.vue

**about - _name - _id.vue**

<template>
 <div>
 {{$route.params.name}}
 {{$route.params.id}}
 </div>
</template>

弄完之后看下 router.js 的變化

export function createRouter() {
 return new Router({
 mode: 'history',
 base: decodeURI('/'),
 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: "/about/:name",
  component: _2ec9f53c,
  name: "about-name"
 }, {
  path: "/about/:name/:id",
  component: _318c16a4,
  name: "about-name-id"
 }, {
  path: "/",
  component: _d3bf5a4e,
  name: "index"
 }],
 fallback: false
 })
}

這里展示的是第二種情況， id 為必選參數(shù)的情況，路由被編譯的結(jié)果。

雖然路由已經(jīng)添加了參數(shù)，但是 id 屬性不是必填屬性，這樣的話不能滿足項(xiàng)目需求又要如何處理呢？很簡(jiǎn)單的，在 _id.vue 文件同目錄下添加一個(gè) index.vue 文件就可以了。

// id為必選參數(shù)
├─page
│ ├─about
│ │ ├─_name
| | | ├─_id.vue
| | | └─index.vue
│ │ └─index.vue
└───└─index.vue

需要注意的是，一定要在 _id.vue 文件中使用傳入的參數(shù)，直接獲取在 index.vue 中是拿不到任何信息的。但是如果訪問(wèn) http://localhost:3000/about/ABC 這樣的路由的話，實(shí)在 index.vue 中是可以獲取到 name 參數(shù)的。

在剛才的 router.js 文件中生成的所有的路由都是平級(jí)的，如何實(shí)現(xiàn)路由的嵌套，如果想要實(shí)現(xiàn)嵌套路由的話，必須有和當(dāng)前路由同名的文件夾存在，才能完成路由的嵌套。

page目錄

├─page
│ ├─about
| | ├─_id.vue
| | └─detaile.vue
│ ├─about.vue
└───└─index.vue

router.js

export function createRouter() {
 return new Router({
 mode: 'history',
 base: decodeURI('/'),
 linkActiveClass: 'nuxt-link-active',
 linkExactActiveClass: 'nuxt-link-exact-active',
 scrollBehavior,
 routes: [{
  path: "/about",
  component: _76687814,
  children: [{
  path: "",
  component: _9ceb4424,
  name: "about"
  }, {
  path: ":id",
  component: _6b59f854,
  name: "about-id"
  }]
 }, {
  path: "/",
  component: _d3bf5a4e,
  name: "index"
 }],
 fallback: false
 })
}

更改完目錄結(jié)構(gòu)，那我們嵌套的路由應(yīng)該如何展示？在 vue.js 中開(kāi)發(fā)的時(shí)候使用 router-view 這個(gè)標(biāo)簽完成的。為了性能的優(yōu)化 Nuxt 也提供了一個(gè)對(duì)應(yīng)的標(biāo)簽 nuxt-child 。

如果想實(shí)現(xiàn)嵌套路由傳參需要稍微的改動(dòng)一下目錄結(jié)構(gòu)，按照上面的方法實(shí)現(xiàn)就好了，下面是一個(gè)路由結(jié)構(gòu)的例子。

page目錄

├─page
│ ├─about
│ │ ├─detail
| | | ├─_id.vue
| | | └─index.vue
│ │ └─index.vue
└───└─index.vue

router.js

export function createRouter() {
 return new Router({
 mode: 'history',
 base: decodeURI('/'),
 linkActiveClass: 'nuxt-link-active',
 linkExactActiveClass: 'nuxt-link-exact-active',
 scrollBehavior,
 routes: [{
  path: "/about",
  component: _76687814,
  name: "about",
  children: [{
  path: "detail",
  component: _0a09b97d,
  name: "about-detail"
  }, {
  path: "detail/:id?",
  component: _fa7c11b6,
  name: "about-detail-id"
  }]
 }, {
  path: "/",
  component: _d3bf5a4e,
  name: "index"
 }],
 fallback: false
 })
}

在 _id.vue 中則可以使用id這個(gè)參數(shù)了。訪問(wèn)路由 http://localhost:3000/about/detail/123 ，依然可以拿到傳入的 id 為 123 的這個(gè)參數(shù)。

說(shuō)了這么多了，還有很多問(wèn)題沒(méi)得說(shuō)完，關(guān)于路由的全局守衛(wèi)又應(yīng)該如何去使用？在 Nuxt 根目錄下有個(gè) plugins 文件夾。首先要做的是在里面創(chuàng)建一個(gè)名為 router.js 文件。

plugins-router.js

export default ({app}) => {
 app.router.beforeEach((to,form,next) => {
 console.log(to)
 next();
 });
}

導(dǎo)出了一個(gè)函數(shù)，在這個(gè)函數(shù)中可以通過(guò)結(jié)構(gòu)拿到 vue 的實(shí)例對(duì)象名叫 app 。需要注意的是，這個(gè) beforeEach 函數(shù)的執(zhí)行，有可能會(huì)在服務(wù)端也會(huì)有可能在客戶端輸出?？蛻舳耸状卧L問(wèn)的頁(yè)面會(huì)在服務(wù)端做輸出，一旦渲染完成之后，則不會(huì)再在服務(wù)端輸出，則會(huì)一直在客戶端進(jìn)行輸出了。

說(shuō)到這里做個(gè)小插曲，那么又該怎么區(qū)分當(dāng)前是在客戶端環(huán)境還是服務(wù)端環(huán)境呢？可以使用 process.server 獲取到當(dāng)前的運(yùn)行環(huán)境，其得到的是 Boolean 值， true 服務(wù)端， fasle 客戶端。

做了這些之后去訪問(wèn)路由，仿佛沒(méi)有任何輸出，無(wú)論實(shí)在客戶端還是在服務(wù)端，都沒(méi)有任何打印輸出，中間缺少了步驟，需要在根目錄下找到 nuxt.config.js 對(duì)插件進(jìn)行配置。

nuxt.config.js

const pkg = require('./package')
module.exports = {
 plugins: [
 '@/plugins/element-ui',
 '@/plugins/router'
 ]
}

由于更改了 Nuxt 配置需要重啟一下服務(wù)，才能正常執(zhí)行剛剛寫(xiě)入的插件。然后訪問(wèn)剛剛寫(xiě)入的路由，會(huì)看在服務(wù)端初次渲染的時(shí)候，會(huì)輸出我們想要的那些東西，進(jìn)行路由跳轉(zhuǎn)的話，會(huì)在客戶端輸出，這也就證明了 Nuxt 只會(huì)做首屏的服務(wù)器渲染。

路由說(shuō)了這么接下來(lái)需要說(shuō)一下 Nuxt 是如何為指定的路由配置數(shù)據(jù)做渲染的。其實(shí) Nuxt 在做渲染的時(shí)候包裹了很多層。首先有一個(gè) Document 作為其模板，然后再去尋找其布局的頁(yè)面，找到對(duì)應(yīng)的頁(yè)面之后，再根據(jù)引用去找到相關(guān)的組件進(jìn)行渲染，數(shù)據(jù)請(qǐng)求與數(shù)據(jù)掛載，一系列完成之后，把剩余的路由信息返還給客戶端，渲染完成，這個(gè)就是 Nuxt 簡(jiǎn)單的渲染流程。

在上面提到了一個(gè) 布局頁(yè)面 ，這個(gè)東西應(yīng)該去哪里找？又應(yīng)該怎么做呢？它對(duì)于項(xiàng)目而言對(duì)于開(kāi)發(fā)又有什么好處？在 Nuxt 根目錄下有一個(gè) layouts 文件夾，下面有一個(gè) default.vue 這個(gè)文件就是上面提到的渲染頁(yè)面，也就同等于 vue 開(kāi)發(fā)中的 App.vue ，在這里可以做很多事情。例如添加一個(gè)全局的導(dǎo)航。

在 layouts 文件夾添加一個(gè) about.vue 文件寫(xiě)入如下內(nèi)容，接下來(lái)需要在 pages 下面的 about.vue 中通知，對(duì)應(yīng) pages 使用哪個(gè)布局頁(yè)面，不寫(xiě)則使用默認(rèn)，然后訪問(wèn) http://localhost:3000/about 相關(guān)的頁(yè)面，只要是和 about 相關(guān)的頁(yè)面，都會(huì)展示這個(gè)內(nèi)容。

layouts - about.vue

<template>
 <div>
 <h3>Aaron 個(gè)人博客主頁(yè)</h3>
 <nuxt></nuxt>
 </div>
</template>

pages - about.vue

<template>
 <div>
  <h3>About</h3>
  <nuxt-child></nuxt-child>
 </div>
</template>
<script>
export default {
 layout:"about"
}
</script>

訪問(wèn)一下所有與 about 頁(yè)面有關(guān)的頁(yè)面，都會(huì)看到 Aaron個(gè)人博客主頁(yè) 這個(gè)字樣，若訪問(wèn)根路由則無(wú)法看到的。

如果做過(guò) mvc 開(kāi)發(fā)的話，如果頁(yè)面發(fā)生錯(cuò)誤會(huì)跳轉(zhuǎn)到一個(gè)錯(cuò)誤頁(yè)面的。 Nuxt 也是有默認(rèn)的錯(cuò)誤頁(yè)面的，但是全是英文而且樣式也不太好看，不能自定義樣式。如何自定義錯(cuò)誤頁(yè)面呢?

在 layouts 文件夾中新建一個(gè) error.vue 文件。

layouts - error.vue

<template>
 <div>
  <h2>這里是錯(cuò)誤頁(yè)面</h2>
  <h3 v-if="error.statusCode == 404">404 - 頁(yè)面不存在</h3>
  <h3 v-else>500 - 服務(wù)器錯(cuò)誤</h3>
  <ul>
    <li><nuxt-link to="/">HOME</nuxt-link></li>
  </ul>
 </div>
</template>

<script>
export default {
 props:["error"]
}
</script>

在 error.vue 中可以通過(guò) props 拿到一個(gè) error 對(duì)象，獲取到 error 錯(cuò)誤信息之后能做任何想要做的事情。需要注意的一點(diǎn)是，自定意的錯(cuò)誤頁(yè)面，只能在客戶端訪問(wèn)失效的時(shí)候才會(huì)響應(yīng)到該頁(yè)面，若在服務(wù)端的話，是無(wú)法直接渲染這個(gè)頁(yè)面的。

更改頁(yè)面配置 Nuxt 中有些全局的配置，配置信息在 nuxt.config.js 更改其全局配置， pages 文件夾中的 *.vue 文件也是可以配置的，頁(yè)面私有的配置會(huì)覆蓋掉全局的配置。

舉例：

export default {
 layout:"about",
 head: {
  title:"About"
 }
}

在這些全局配置中最重要的一個(gè)就是 asyncData 這個(gè)屬性。 asyncData 到底是用來(lái)做什么的呢？這個(gè)數(shù)據(jù)可以在設(shè)置組件的數(shù)據(jù)之前能一步獲取或者處理數(shù)據(jù)。也就是說(shuō)在組件渲染之前先獲取到數(shù)據(jù)，然后等待掛載渲染。

舉個(gè)例子：

<template>
 <div>
   <h3>姓名：{{userInfo.name}}</h3>
   <h3>年齡：{{userInfo.age}}</h3>
   <nuxt-child></nuxt-child>
 </div>
</template>
<script>
let getUserInfo = () => {
 return new Promise(resolve => {
  setTimeout(() => {
   let data = {"name":"Aaron","age":18};
   resolve(data);
  })
 })
}
export default {
 layout:"about",
 head: {
  title:"About"
 },
 async asyncData(){
  const userInfo = await getUserInfo();
  return {userInfo}
 }
}
</script>

一定要 return 出去獲取到的對(duì)象，這樣就可以在組件中使用，這里返回的數(shù)據(jù)會(huì)和組件中的 data 合并。這個(gè)函數(shù)不光在服務(wù)端會(huì)執(zhí)行，在客戶端同樣也會(huì)執(zhí)行。

注意事項(xiàng)：

1.asyncData 方法會(huì)在組件(限于頁(yè)面組件)每次加載之前被調(diào)用
2.asyncData 可以在服務(wù)端或路由更新之前被調(diào)用
3.第一個(gè)參數(shù)被設(shè)定為當(dāng)前頁(yè)面的上下文對(duì)象
4.Nuxt會(huì)將 asyncData 返回的數(shù)據(jù)融合到組件的data方法返回的數(shù)據(jù)一并返回給組件使用
5.對(duì)于 asyncData 方式實(shí)在組件初始化前被調(diào)用的，所以在方法內(nèi)飾沒(méi)辦法通過(guò)this來(lái)引用組件的實(shí)例對(duì)象

剛剛提到了一點(diǎn)就是上下問(wèn)對(duì)象，在上線文對(duì)象中可以獲取到很多東西，如路由參數(shù)，錯(cuò)誤信息等等等，這里就不作太多贅述了，有了這些可以做一些頁(yè)面的重定向或者其他工作，比如參數(shù)校驗(yàn)，安全驗(yàn)證等工作。

路由扯了一大堆，接下來(lái)說(shuō)一下如何在 Nuxt 中融入 axios 的使用。

安裝 axios

npm install @nuxtjs/axios --save-dev

安裝完成后更改配置信息：

nuxt.config.js

module.exports = {
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  axios: {
    proxy:true // 代理
  },
  proxy: {
    "/api/":"http://localhost:3001/"  // key(路由前綴)：value(代理地址)
  }
}

主要說(shuō)名一下 proxy 這里， /api/ 在請(qǐng)求的時(shí)候遇到此前綴則會(huì)只指向的代理地址去請(qǐng)求數(shù)據(jù)。

既然說(shuō)到了 axios ，就不得不提到的一個(gè)東西就是攔截器，很是有用在項(xiàng)目開(kāi)發(fā)過(guò)程中必不可少的。

舉個(gè)例子：

module.expores{
  plugins: [
    '@/pluginx/axios'
  ]
}
plugins/axios.js
export default ({$axios,request}) => {
  $axios. onRequest((config) => {
    config.headers.token = "Aaron"
  })
}

總結(jié)

說(shuō)了這么多也許會(huì)有些紕漏，或者遺漏的知識(shí)點(diǎn)，若有什么錯(cuò)誤的地方可以留言，盡快做出改正。謝謝大家花費(fèi)這么長(zhǎng)時(shí)間閱讀這篇文章。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。