middleware定義（nuxt.config, layout, pages）

middleware顧名思義就是中間件的意思，在中間價可以做路由攔截，參數(shù)過濾等等...middleware有以下三種定義方式。

• nuxt.config 配置文件定義

export?default{
?router:{
?????middleware:?['xxxx']?//直接寫中間件文件名，比如middleware/auth.js，直接寫auth就ojbk
??}
}

特別提醒? ：定義在nuxt.config中的中間件要在根目錄的middleware文件下，定義對應的js文件，導出一個函數(shù)。

• layout頁面定義

export?default?{
??middleware:({route,params,query})=>{
????console.log(route,params,query,?'layout')
??}
}

• pages頁面定義

export?default?{
??middleware:({route,params,query})=>{
????console.log(route,params,query,?'page')
??}
}

middleware的第一參數(shù)是一個上下文參數(shù)，能夠解構(gòu)出route,params,query等等...參數(shù)，足夠我們做各種騷操作。既然它們能夠定義在不同位置，那么它們的執(zhí)行順序就有前有后?。

執(zhí)行順序：nuxt.config => layout => page

validate 參數(shù)驗證 (pages)

validate鉤子主要是做頁面級別（pages）的參數(shù)驗證操作,在它的上下文能夠解構(gòu)出params,query...參數(shù)，最后return true代表驗證通過，return false表示驗證失敗。

export?default?{
??validate({params,query}){
????console.log(params,query,'validate')
????return?true
??}
}

asyncData 服務(wù)端請求異步數(shù)據(jù) (pages)

asyncData 主要做服務(wù)端數(shù)據(jù)請求渲染,在它上下文能夠解構(gòu)出axios,route,params...參數(shù)，要解構(gòu)出axios,route,params...參數(shù)，要解構(gòu)出axios,route,params...參數(shù)，要解構(gòu)出axios，還需要做一些額外配置，往下拉有講到。解構(gòu)出$axios，就可以做ajax請求，最后把要渲染的數(shù)據(jù)return出去就行。

export?default?{
??async?asyncData({$axios,route}){
????let?data?=?await?$axios('xxx/xxx/xx')
????return?{
?????data
????}
??}
}

擴展路由（nuxt.config）

在nuxt默認為約定是路由，就是在pages在創(chuàng)建一個文件，或者一個文件夾就會自動創(chuàng)建對應的路由，無需手動配置什么，方便極了，這里就不多說，這里只要說一下，當我們要對某個地址做一個特殊操作的時候，或者全面接管約定式路由的時候，就需要用擴展路由了。

假如想讓一個叫/hahaha/:id的路由也跳到詳情，也這樣做?

export?default?{
??router:{
????extendRoutes:(routes,resolve)=>{
??????routes.push({
????????name:"hahaha",
????????path:'/hahaha/:id',
????????component:resolve(__dirname,'pages/detail/_id.vue')
??????})
????}
??}
}

假如要全面接管約定式路由，可以這樣做?

export?default?{
??router:{
????extendRoutes(routes,?resolve){
?????return?[
???????{
?????????name:"home",
?????????path:"/",
?????????component:resolve(__dirname,'pages/index'),
?????????meta:{
???????????title:"home"
?????????}
???????}
???????...這里還可以繼續(xù)寫，一般如果要接管約定式路由的話，都會把它放到一個文件再引入
?????]
????}
??}
}

定制錯誤頁面 （layout）

處理錯誤頁面，默認情況下，nuxt提供了一個默認的錯誤頁面，如果你嫌它錯的哇，也可以自己定制一個風騷的錯誤頁面，直接下layout目錄下定義一個error.vue文件就可以定制自己喜歡的錯誤頁面了，它會代替默認的錯誤頁面，在error.vue的prop有個error屬于是包含錯誤信息的

動畫定制 （css,pages, nuxt.config）

全局

假如想要全局實現(xiàn)一個路由切換動畫，那么可以在根目錄的assets/css目錄(全局css樣式可以隨便你放，一般都會放在assets下,你也可以放在某個角落)定義一個全局文件，實現(xiàn)一下以下幾個類?

• page-enter-active

• page-leave-active

• page-enter

• page-leave

?

.page-enter-active,?.page-leave-active{
????transition:?opacity?1.5s;
}
.page-enter,?.page-leave-active{
????opacity:?0;
}

最后在nuxt.config引用這個文件就可以實現(xiàn)一個路由切換的淡入淡出效果。

export?default?{
??css:?[
????"assets/css/xxx.css"
??],
}

局部

假如想在某個路由頁面有個一種獨一無二的入場出場方式的話，也可以為它單獨實現(xiàn)獨有的效果，只需要給個transition:'xxxx'(xxx是自己起的名字，隨便你起),然后實現(xiàn)對應的類就可以實現(xiàn)該有的動畫。

• xxx-enter-active

• xxx-leave-active

• xxx-enter

• xxx-leave

路由守衛(wèi)

全局守衛(wèi)

• 定義的在nuxt.config的middleware

• 定義在layout的middleware

• 定義在plugins

組件局部守衛(wèi)

• 定義在組件的middleware

局部后置守衛(wèi)

• 組件beforeRouteLeave鉤子

數(shù)據(jù)請求 (nuxt.config)

要做數(shù)據(jù)請求，就要用到axios了，nuxt有為我們集成，只需要安裝，引用就可以。

• 第一步?npm i \-D @nuxtjs/axois

• 第二步在nuxt.config引入就可以

export?default{
?modules:?[
??'@nuxtjs/axios'
?]
}

然后重啟，就可以在plugin,aysncData...的上下文解構(gòu)到$axios參數(shù)

重要提醒? ：nuxt集成的庫大多數(shù)都要在modules中引入。

開啟代理

有時候我們的接口出現(xiàn)了跨域，那么我們就要代理了。

• 第一步?npm i \-D @nuxtjs/proxy

• 第二步 nuxt.config 下配置

• @nuxtjs/proxy

• nuxt.config 下配置 axios和proxy

export?default?{
??axios:{
?????proxy:true
???}，
???proxy:{
?????'api/':{
???????target:'http://localhost:3000'
?????}
???}
}

axios攔截

在平時開發(fā)中請求異步數(shù)據(jù)，少不了請求前，請求后做一些攔截，在nuxt中也很容易實現(xiàn)，只需定義一個axios攔截plugin。

• 第一步 在plugins目錄，起一個性感的插件名，比如叫axios.js

export?default({$axios})=>{
??//?請求攔截
??$axios.onRequest(req=>{
????//?doing?something...
??})
??//?響應攔截
??$axios.onResponse(res=>{
????//?doing?something...
??})
??//?錯誤攔截
??$axios.onError(err=>{
??//?doing?something...
??})
}

• 第二步 在nuxt.config中引入插件

export?default?{
plugins:?[
????{
??????src:'~/plugins/axios',
??????ssr:true?//?默認為true，會同時在服務(wù)端（asyncData（{$axios}））和客戶端（this.$axios）同時攔截axios請求，設(shè)為false就只會攔截客戶端
????}
??]
}

配置loading （nuxt.config）

配置loading有兩種方式。一種在，

• 直接在默認的loading上調(diào)樣式

export?default?{
??loading:?{
????color:?'blue',
????height:?'5px'
??}
}

它還有這樣屬性可以調(diào)

• 定制loading

export?default?{
??loading:?'指向一個組件的路徑'
}

這個被指向的組件會有兩個特殊鉤子start, finish鉤子，代表開始加載的時候，和加載結(jié)束的時候做些什么

vuex

配置vuex直接下根目錄下的store目錄下定義就可以了，注意的是，除了index文件不是具名文件，其他的文件都是具名的,具名的在調(diào)用使需要加上這個名字，比如（this.$store.commit('xxx/handle')）。

vuex的文件寫法格式如下?

export?const?state?=>?（{}）

export?const?getters?=?{}

export?const?actions?=?{}

export?const?mutations?=?{}

配置UI庫

第三方UI庫配置，這里以element-ui為例。

• 第一步?npm i \-D element-ui

• 第二步 在plugins目錄建議xxx.js然后引入element-ui注冊

import?Vue?from?'vue'

import?ElementUi?from?'element-ui'

Vue.use(ElementUi)

• 第三步 在nuxt.config 配置

export?default?{
??css:?[
????"element-ui/lib/theme.chalk/index.css"?//引入element-ui的樣式
??],
??plugins:?[
????'~/plugins/xxx'?//?引入剛剛定義的plugin
??]
}
?

定制meta（nuxt.config,pages）

定制可以在nuxt.config中定義全局，也可以在pages下定制單獨的。

nuxt

export?default?{
??head:?{
????title:?'test',
????meta:?[
??????{?charset:?'utf-8'?},
??????{?name:?'viewport',?content:?'width=device-width,?initial-scale=1'?},
??????{?hid:?'description',?name:?'description',?content:?''?}
????],
????link:?[
??????{?rel:?'icon',?type:?'image/x-icon',?href:?'/favicon.ico'?}
????]
??}
}

pages

export?default?{
??head:()=>({
????title:?'test',
????meta:?[
??????{?charset:?'utf-8'?},
??????{?name:?'viewport',?content:?'width=device-width,?initial-scale=1'?},
??????{?hid:?'description',?name:?'description',?content:?''?}
????],
????link:?[
??????{?rel:?'icon',?type:?'image/x-icon',?href:?'/favicon.ico'?}
????]
??})
}

其他

• 路徑別名:~ 或 @ srcDir , ~~ 或 @@ rootDir (默認情況下，srcDir 和 rootDir 相同)

• nuxt-link 選中樣式 修改 active-class='xxx'

• @nuxtjs/style-resources 配置less,scss全局變量

• 更多特性,自己看官網(wǎng)

最后

• 歡迎加我微信(winty230)，拉你進技術(shù)群，長期交流學習...
  

• 歡迎關(guān)注「前端Q」,認真學前端，做個專業(yè)的技術(shù)人...

點個在看支持我吧