溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
現在大多數開發都是基于 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> <h3>This About</h3> </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> <h3>This About</h3> <nuxt-link to="/">首頁</nuxt-link> <router-link to="/">首頁</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> <h3>This About</h3> <nuxt-link to="/">首頁</nuxt-link> <router-link to="/">首頁</router-link> </div> </template> about/detail.vue <template> <div> <h3>This Detail</h3> </div> </template>
現在如果我們想要訪問剛才的那兩個路由地址分別就是 http://localhost:3000/about 和 http://localhost:3000/about/detail 就能看到剛才編寫的 page 頁面了。
如果想要看路由生成到底是什么樣子的？可以在根目錄下有一個 .nuxt 文件夾，在里面可以看到一個 router.js ,這個文件夾下面就是 Nuex 生成好的路由信息。
打開文件后翻到最后會有一段這樣的代碼，是不是很眼熟？這是不就是在編寫 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: _9ceb4424,
name: "about"
}, {
path: "/about/detail",
component: _18146f65,
name: "about-detail"
}, {
path: "/",
component: _d3bf5a4e,
name: "index"
}],
fallback: false
})
}
有了這個文件的話我們就可以清楚的知道，路由的結構了。不僅僅這樣，還可以使用 name 去實現路由的跳轉了。
需要注意的是，如果你的路由是有文件夾嵌套的話， Nuxt 是用使用 - 來拼接路由的 name 名稱的(如: about-detail )，但是文件夾內部的 index.vue 會直接已文件夾的名字作為 name 。一旦知道了路由的 name ，這樣我們就可以使用命令的方式跳轉路由了。
再次更改一下 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'}">首頁</router-link>
<button @click="onClick">跳轉到詳情</button>
</div>
</template>
<script>
export default {
methods: {
onClick() {
this.$router.push({name:"about-detail"})
}
}
}
</script>
使用路由訪問 http://localhost:3000/about 地址，分別點擊詳情、首頁與 button ，都是能夠正常跳轉的，與之前的 Vue 開發是完全沒有任何區別的。在 vue-router 中有一個很重要的一個點就是 動態路由 的概念，如果想要實現動態路由應該怎么處理呢？
如果想要在 Nuxt 中使用動態路由的話，需要在對應的路由下面添加一個 _參數名.vue 的文件，在 about 文件下面添加一個 _id.vue
page目錄
├─page │ ├─about │ │ ├─detail.vue │ │ ├─_id.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: _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 這個路由，明顯的變化不止這些變動的還有 name: "about-id" 不再是之前的 name:about 了。如果想要使用這個 id 的話必須在 _id.vue 中才能獲取到。
**_id.vue**
<template>
<div>
{{$route.params.name}}
{{$route.params.id}}
</div>
</template>
在 _id.vue 中編寫以上代碼并使用 http://localhost:3000/about/ABC ,可以看到在頁面中已經展示了當前的 id 值。
在實際開發過程當中可能 params 可能會有多個參數，又應該怎么處理呢？
調整目錄結構
// id為可選參數 ├─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 為必選參數的情況，路由被編譯的結果。
雖然路由已經添加了參數，但是 id 屬性不是必填屬性，這樣的話不能滿足項目需求又要如何處理呢？很簡單的，在 _id.vue 文件同目錄下添加一個 index.vue 文件就可以了。
// id為必選參數 ├─page │ ├─about │ │ ├─_name | | | ├─_id.vue | | | └─index.vue │ │ └─index.vue └───└─index.vue
需要注意的是，一定要在 _id.vue 文件中使用傳入的參數，直接獲取在 index.vue 中是拿不到任何信息的。但是如果訪問 http://localhost:3000/about/ABC 這樣的路由的話，實在 index.vue 中是可以獲取到 name 參數的。
在剛才的 router.js 文件中生成的所有的路由都是平級的，如何實現路由的嵌套，如果想要實現嵌套路由的話，必須有和當前路由同名的文件夾存在，才能完成路由的嵌套。
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
})
}
更改完目錄結構，那我們嵌套的路由應該如何展示？在 vue.js 中開發的時候使用 router-view 這個標簽完成的。為了性能的優化 Nuxt 也提供了一個對應的標簽 nuxt-child 。
如果想實現嵌套路由傳參需要稍微的改動一下目錄結構，按照上面的方法實現就好了，下面是一個路由結構的例子。
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這個參數了。訪問路由 http://localhost:3000/about/detail/123 ，依然可以拿到傳入的 id 為 123 的這個參數。
說了這么多了，還有很多問題沒得說完，關于路由的全局守衛又應該如何去使用？在 Nuxt 根目錄下有個 plugins 文件夾。首先要做的是在里面創建一個名為 router.js 文件。
plugins-router.js
export default ({app}) => {
app.router.beforeEach((to,form,next) => {
console.log(to)
next();
});
}
導出了一個函數，在這個函數中可以通過結構拿到 vue 的實例對象名叫 app 。需要注意的是，這個 beforeEach 函數的執行，有可能會在服務端也會有可能在客戶端輸出。客戶端首次訪問的頁面會在服務端做輸出，一旦渲染完成之后，則不會再在服務端輸出，則會一直在客戶端進行輸出了。
說到這里做個小插曲，那么又該怎么區分當前是在客戶端環境還是服務端環境呢？可以使用 process.server 獲取到當前的運行環境，其得到的是 Boolean 值， true 服務端， fasle 客戶端。
做了這些之后去訪問路由，仿佛沒有任何輸出，無論實在客戶端還是在服務端，都沒有任何打印輸出，中間缺少了步驟，需要在根目錄下找到 nuxt.config.js 對插件進行配置。
nuxt.config.js
const pkg = require('./package')
module.exports = {
plugins: [
'@/plugins/element-ui',
'@/plugins/router'
]
}
由于更改了 Nuxt 配置需要重啟一下服務，才能正常執行剛剛寫入的插件。然后訪問剛剛寫入的路由，會看在服務端初次渲染的時候，會輸出我們想要的那些東西，進行路由跳轉的話，會在客戶端輸出，這也就證明了 Nuxt 只會做首屏的服務器渲染。
路由說了這么接下來需要說一下 Nuxt 是如何為指定的路由配置數據做渲染的。其實 Nuxt 在做渲染的時候包裹了很多層。首先有一個 Document 作為其模板，然后再去尋找其布局的頁面，找到對應的頁面之后，再根據引用去找到相關的組件進行渲染，數據請求與數據掛載，一系列完成之后，把剩余的路由信息返還給客戶端，渲染完成，這個就是 Nuxt 簡單的渲染流程。
在上面提到了一個 布局頁面 ，這個東西應該去哪里找？又應該怎么做呢？它對于項目而言對于開發又有什么好處？在 Nuxt 根目錄下有一個 layouts 文件夾，下面有一個 default.vue 這個文件就是上面提到的渲染頁面，也就同等于 vue 開發中的 App.vue ，在這里可以做很多事情。例如添加一個全局的導航。
在 layouts 文件夾添加一個 about.vue 文件寫入如下內容，接下來需要在 pages 下面的 about.vue 中通知，對應 pages 使用哪個布局頁面，不寫則使用默認，然后訪問 http://localhost:3000/about 相關的頁面，只要是和 about 相關的頁面，都會展示這個內容。
layouts - about.vue
<template> <div> <h3>Aaron 個人博客主頁</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>
訪問一下所有與 about 頁面有關的頁面，都會看到 Aaron個人博客主頁 這個字樣，若訪問根路由則無法看到的。
如果做過 mvc 開發的話，如果頁面發生錯誤會跳轉到一個錯誤頁面的。 Nuxt 也是有默認的錯誤頁面的，但是全是英文而且樣式也不太好看，不能自定義樣式。如何自定義錯誤頁面呢?
在 layouts 文件夾中新建一個 error.vue 文件。
layouts - error.vue
<template>
<div>
<h2>這里是錯誤頁面</h2>
<h3 v-if="error.statusCode == 404">404 - 頁面不存在</h3>
<h3 v-else>500 - 服務器錯誤</h3>
<ul>
<li><nuxt-link to="/">HOME</nuxt-link></li>
</ul>
</div>
</template>
<script>
export default {
props:["error"]
}
</script>
在 error.vue 中可以通過 props 拿到一個 error 對象，獲取到 error 錯誤信息之后能做任何想要做的事情。需要注意的一點是，自定意的錯誤頁面，只能在客戶端訪問失效的時候才會響應到該頁面，若在服務端的話，是無法直接渲染這個頁面的。
更改頁面配置 Nuxt 中有些全局的配置，配置信息在 nuxt.config.js 更改其全局配置， pages 文件夾中的 *.vue 文件也是可以配置的，頁面私有的配置會覆蓋掉全局的配置。
舉例：
export default {
layout:"about",
head: {
title:"About"
}
}
在這些全局配置中最重要的一個就是 asyncData 這個屬性。 asyncData 到底是用來做什么的呢？這個數據可以在設置組件的數據之前能一步獲取或者處理數據。也就是說在組件渲染之前先獲取到數據，然后等待掛載渲染。
舉個例子：
<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 出去獲取到的對象，這樣就可以在組件中使用，這里返回的數據會和組件中的 data 合并。這個函數不光在服務端會執行，在客戶端同樣也會執行。
注意事項：
1.asyncData 方法會在組件(限于頁面組件)每次加載之前被調用
2.asyncData 可以在服務端或路由更新之前被調用
3.第一個參數被設定為當前頁面的上下文對象
4.Nuxt會將 asyncData 返回的數據融合到組件的data方法返回的數據一并返回給組件使用
5.對于 asyncData 方式實在組件初始化前被調用的，所以在方法內飾沒辦法通過this來引用組件的實例對象
剛剛提到了一點就是上下問對象，在上線文對象中可以獲取到很多東西，如路由參數，錯誤信息等等等，這里就不作太多贅述了，有了這些可以做一些頁面的重定向或者其他工作，比如參數校驗，安全驗證等工作。
路由扯了一大堆，接下來說一下如何在 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(代理地址)
}
}
主要說名一下 proxy 這里， /api/ 在請求的時候遇到此前綴則會只指向的代理地址去請求數據。
既然說到了 axios ，就不得不提到的一個東西就是攔截器，很是有用在項目開發過程中必不可少的。
舉個例子：
module.expores{
plugins: [
'@/pluginx/axios'
]
}
plugins/axios.js
export default ({$axios,request}) => {
$axios. onRequest((config) => {
config.headers.token = "Aaron"
})
}
總結
說了這么多也許會有些紕漏，或者遺漏的知識點，若有什么錯誤的地方可以留言，盡快做出改正。謝謝大家花費這么長時間閱讀這篇文章。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
