摘要:前面既然說到了會(huì)把文件夾下面的所有文件編譯成路由,那么子路由需要使用文件夾嵌套才行。客戶端首次訪問的頁面會(huì)在服務(wù)端做輸出,一旦渲染完成之后,則不會(huì)再在服務(wù)端輸出,則會(huì)一直在客戶端進(jìn)行輸出了。
服務(wù)端預(yù)渲染之Nuxt - 使用
現(xiàn)在大多數(shù)開發(fā)都是基于Vue或者React開發(fā)的,能夠達(dá)到快速開發(fā)的效果,也有一些不足的地方,Nuxt能夠在服務(wù)端做出渲染,然后讓搜索引擎在爬取數(shù)據(jù)的時(shí)候能夠讀到當(dāng)前頁面。
首先要說明一點(diǎn),我們可以認(rèn)為我們所編寫的Vue項(xiàng)目是一個(gè)服務(wù)端的項(xiàng)目,雖然編寫的還是Vue項(xiàng)目,但是Nuxt是基于服務(wù)器環(huán)境的。
就簡(jiǎn)單的說一下Nuxt使用。基礎(chǔ)只是還是以官方文檔為主,如果博客中哪里有問題,歡迎留言指正。
說了這么多,進(jìn)入正題。
路由
與傳統(tǒng)的Vue項(xiàng)目不同的是,我們?cè)谑褂?b>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/訪問的時(shí)候能夠正常訪問路由。
為了證實(shí)上面這一點(diǎn),在pages下面創(chuàng)建一個(gè)信息about.vue文件,并且http://localhost:3000/about去訪問剛剛寫的頁面。我們可以按照正常的Vue頁面去開發(fā)就好了。
page目錄
├─page │ ├─index.vue └───└─about.vue
about.vue
This About
創(chuàng)建完成之后使用http://localhost:3000/about訪問該頁面,頁面能夠正常的渲染出來了。就會(huì)看到This About顯示在頁面中。
做到這一步之后就應(yīng)該實(shí)現(xiàn)路由之間的跳轉(zhuǎn)了。Vue開發(fā)過程中,都是使用router-link標(biāo)簽完成路由之間的跳轉(zhuǎn),在Nuxt也同樣可以使用router-link,但是Nuxt仍然推薦使用nuxt-link,nuxt-link與router-link的功能是等效的。
可能會(huì)有一些疑問,既然是等效的,為什么要使用nuxt-link呢?官方文檔中是這樣說的:將來我們會(huì)為nuxt-link組件增加更多的功能特性,例如資源預(yù)加載,用于提升nuxt.js應(yīng)用的響應(yīng)速度。顯然嘛,官方不會(huì)無緣無故的就做出這么一個(gè)東西來,肯定實(shí)在其中做了很多的優(yōu)化工作的。
稍微的改動(dòng)一下剛才的about.vue在里面添加兩個(gè)標(biāo)簽,一個(gè)使用nuxt-link,一個(gè)使用router-link看下能否正常完成跳轉(zhuǎn)。
about.vue - 更改后
This About
首頁 首頁
既然從路由開始那么就不得不說到子路由,全局路由守衛(wèi)這些都些在路由中經(jīng)常用到的應(yīng)該怎么處理?該怎么解決這些問題。
前面既然說到了Nuxt會(huì)把pages文件夾下面的所有*.vue文件編譯成路由,那么子路由需要使用文件夾嵌套才行。
接下來就嘗試一下。首先要更改一下pgeas目錄結(jié)構(gòu)。
page目錄
├─page │ ├─about │ │ ├─detail.vue │ │ └─index.vue └───└─index.vue
注意上面的about目錄,是index.vue而并非about.vue,這里的index.vue指的是about路由下的首頁,也就是最開始放在與index.vue同級(jí)的那個(gè)about.vue是一樣的效果。
about/index.vue
This About
首頁 首頁
about/detail.vue
This Detail
現(xiàn)在如果我們想要訪問剛才的那兩個(gè)路由地址分別就是http://localhost:3000/about和http://localhost:3000/about/detail就能看到剛才編寫的page頁面了。
如果想要看路由生成到底是什么樣子的?可以在根目錄下有一個(gè).nuxt文件夾,在里面可以看到一個(gè)router.js,這個(gè)文件夾下面就是Nuex生成好的路由信息。
打開文件后翻到最后會(huì)有一段這樣的代碼,是不是很眼熟?這是不就是在編寫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是用使用-來拼接路由的name名稱的(如:about-detail),但是文件夾內(nèi)部的index.vue會(huì)直接已文件夾的名字作為name。一旦知道了路由的name,這樣我們就可以使用命令的方式跳轉(zhuǎn)路由了。
再次更改一下about/index.vue。
about/index.vue
This About
詳情 首頁
使用路由訪問http://localhost:3000/about地址,分別點(diǎn)擊詳情、首頁與button,都是能夠正常跳轉(zhuǎn)的,與之前的Vue開發(fā)是完全沒有任何區(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
{{$route.params.name}} {{$route.params.id}}
在_id.vue中編寫以上代碼并使用http://localhost:3000/about/ABC,可以看到在頁面中已經(jīng)展示了當(dāng)前的id值。
在實(shí)際開發(fā)過程當(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
{{$route.params.name}} {{$route.params.id}}
弄完之后看下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中是拿不到任何信息的。但是如果訪問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中開發(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ù)了。訪問路由http://localhost:3000/about/detail/123,依然可以拿到傳入的id為123的這個(gè)參數(shù)。
說了這么多了,還有很多問題沒得說完,關(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ù)中可以通過結(jié)構(gòu)拿到vue的實(shí)例對(duì)象名叫app。需要注意的是,這個(gè)beforeEach函數(shù)的執(zhí)行,有可能會(huì)在服務(wù)端也會(huì)有可能在客戶端輸出。客戶端首次訪問的頁面會(huì)在服務(wù)端做輸出,一旦渲染完成之后,則不會(huì)再在服務(wù)端輸出,則會(huì)一直在客戶端進(jìn)行輸出了。
說到這里做個(gè)小插曲,那么又該怎么區(qū)分當(dāng)前是在客戶端環(huán)境還是服務(wù)端環(huán)境呢?可以使用process.server獲取到當(dāng)前的運(yùn)行環(huán)境,其得到的是Boolean值,true服務(wù)端,fasle客戶端。
做了這些之后去訪問路由,仿佛沒有任何輸出,無論實(shí)在客戶端還是在服務(wù)端,都沒有任何打印輸出,中間缺少了步驟,需要在根目錄下找到nuxt.config.js對(duì)插件進(jìn)行配置。
nuxt.config.js
const pkg = require("./package") module.exports = { plugins: [ "@/plugins/element-ui", "@/plugins/router" ] }
由于更改了Nuxt配置需要重啟一下服務(wù),才能正常執(zhí)行剛剛寫入的插件。然后訪問剛剛寫入的路由,會(huì)看在服務(wù)端初次渲染的時(shí)候,會(huì)輸出我們想要的那些東西,進(jìn)行路由跳轉(zhuǎn)的話,會(huì)在客戶端輸出,這也就證明了Nuxt只會(huì)做首屏的服務(wù)器渲染。
路由說了這么接下來需要說一下Nuxt是如何為指定的路由配置數(shù)據(jù)做渲染的。其實(shí)Nuxt在做渲染的時(shí)候包裹了很多層。首先有一個(gè)Document作為其模板,然后再去尋找其布局的頁面,找到對(duì)應(yīng)的頁面之后,再根據(jù)引用去找到相關(guān)的組件進(jìn)行渲染,數(shù)據(jù)請(qǐng)求與數(shù)據(jù)掛載,一系列完成之后,把剩余的路由信息返還給客戶端,渲染完成,這個(gè)就是Nuxt簡(jiǎn)單的渲染流程。
在上面提到了一個(gè)布局頁面,這個(gè)東西應(yīng)該去哪里找?又應(yīng)該怎么做呢?它對(duì)于項(xiàng)目而言對(duì)于開發(fā)又有什么好處?在Nuxt根目錄下有一個(gè)layouts文件夾,下面有一個(gè)default.vue這個(gè)文件就是上面提到的渲染頁面,也就同等于vue開發(fā)中的App.vue,在這里可以做很多事情。例如添加一個(gè)全局的導(dǎo)航。
在layouts文件夾添加一個(gè)about.vue文件寫入如下內(nèi)容,接下來需要在pages下面的about.vue中通知,對(duì)應(yīng)pages使用哪個(gè)布局頁面,不寫則使用默認(rèn),然后訪問http://localhost:3000/about相關(guān)的頁面,只要是和about相關(guān)的頁面,都會(huì)展示這個(gè)內(nèi)容。
layouts - about.vue
Aaron 個(gè)人博客主頁
pages - about.vue
About
訪問一下所有與about頁面有關(guān)的頁面,都會(huì)看到Aaron個(gè)人博客主頁這個(gè)字樣,若訪問根路由則無法看到的。
如果做過mvc開發(fā)的話,如果頁面發(fā)生錯(cuò)誤會(huì)跳轉(zhuǎn)到一個(gè)錯(cuò)誤頁面的。Nuxt也是有默認(rèn)的錯(cuò)誤頁面的,但是全是英文而且樣式也不太好看,不能自定義樣式。如何自定義錯(cuò)誤頁面呢?
在layouts文件夾中新建一個(gè)error.vue文件。
layouts - error.vue
這里是錯(cuò)誤頁面
404 - 頁面不存在
500 - 服務(wù)器錯(cuò)誤
HOME
在error.vue中可以通過props拿到一個(gè)error對(duì)象,獲取到error錯(cuò)誤信息之后能做任何想要做的事情。需要注意的一點(diǎn)是,自定意的錯(cuò)誤頁面,只能在客戶端訪問失效的時(shí)候才會(huì)響應(yīng)到該頁面,若在服務(wù)端的話,是無法直接渲染這個(gè)頁面的。
更改頁面配置Nuxt中有些全局的配置,配置信息在nuxt.config.js更改其全局配置,pages文件夾中的*.vue文件也是可以配置的,頁面私有的配置會(huì)覆蓋掉全局的配置。
舉例:
export default { layout:"about", head: { title:"About" } }
在這些全局配置中最重要的一個(gè)就是asyncData這個(gè)屬性。asyncData到底是用來做什么的呢?這個(gè)數(shù)據(jù)可以在設(shè)置組件的數(shù)據(jù)之前能一步獲取或者處理數(shù)據(jù)。也就是說在組件渲染之前先獲取到數(shù)據(jù),然后等待掛載渲染。
舉個(gè)例子:
姓名:{{userInfo.name}}
年齡:{{userInfo.age}}
一定要return出去獲取到的對(duì)象,這樣就可以在組件中使用,這里返回的數(shù)據(jù)會(huì)和組件中的data合并。這個(gè)函數(shù)不光在服務(wù)端會(huì)執(zhí)行,在客戶端同樣也會(huì)執(zhí)行。
注意事項(xiàng):
asyncData 方法會(huì)在組件(限于頁面組件)每次加載之前被調(diào)用
asyncData 可以在服務(wù)端或路由更新之前被調(diào)用
第一個(gè)參數(shù)被設(shè)定為當(dāng)前頁面的上下文對(duì)象
Nuxt會(huì)將 asyncData 返回的數(shù)據(jù)融合到組件的data方法返回的數(shù)據(jù)一并返回給組件使用
對(duì)于 asyncData 方式實(shí)在組件初始化前被調(diào)用的,所以在方法內(nèi)飾沒辦法通過this來引用組件的實(shí)例對(duì)象
剛剛提到了一點(diǎn)就是上下問對(duì)象,在上線文對(duì)象中可以獲取到很多東西,如路由參數(shù),錯(cuò)誤信息等等等,這里就不作太多贅述了,有了這些可以做一些頁面的重定向或者其他工作,比如參數(shù)校驗(yàn),安全驗(yàn)證等工作。
路由扯了一大堆,接下來說一下如何在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/在請(qǐng)求的時(shí)候遇到此前綴則會(huì)只指向的代理地址去請(qǐng)求數(shù)據(jù)。
既然說到了axios,就不得不提到的一個(gè)東西就是攔截器,很是有用在項(xiàng)目開發(fā)過程中必不可少的。
舉個(gè)例子:
module.expores{ plugins: [ "@/plugins/axios" ], modules: [ // Doc: https://axios.nuxtjs.org/usage "@nuxtjs/axios", ], }
plugins/axios.js
export default ({ $axios, redirect }) => { $axios.onRequest(config => { console.log("Making request to " + config.url) }) $axios.onError(error => { const code = parseInt(error.response && error.response.status) if (code === 400) { redirect("/400") } }) }
總結(jié)
說了這么多也許會(huì)有些紕漏,或者遺漏的知識(shí)點(diǎn),若有什么錯(cuò)誤的地方可以在下方留言,盡快做出改正。謝謝大家花費(fèi)這么長時(shí)間閱讀這篇文章。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/103313.html
摘要:為了解決問題,推出了服務(wù)端預(yù)渲染,以便提高對(duì)優(yōu)化。應(yīng)用,到了,單頁面應(yīng)用優(yōu)秀的用戶體驗(yàn),逐漸成為了主流,頁面整體式渲染出來的,稱之為客戶端渲染。客戶端接收數(shù)據(jù),然后完成最終渲染。通過對(duì)客戶端服務(wù)端基礎(chǔ)框架的抽象組織,主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開發(fā)一般都是前后端分離,mvvm和mvc的開發(fā)框架,如Angular、React和Vue等,雖然寫框架能夠使我們快速的完成開發(fā),但是由于前...
摘要:根據(jù)官方文檔在文件下面創(chuàng)建兩個(gè)文件,分別是和。在中可以直接使用,并且是默認(rèn)啟用命名空間的。在中觸發(fā)熱更新。使用中間件中間件沒有給出具體的使用文檔,而是放入了一個(gè)編輯器。對(duì)配置有興趣的可以在官方文檔找到渲染文檔。 Nuxt是解決SEO的比較常用的解決方案,隨著Nuxt也有很多坑,每當(dāng)突破一個(gè)小技術(shù)點(diǎn)的時(shí)候,都有很大的成就感,在這段時(shí)間里著實(shí)讓我痛并快樂著。在這里根據(jù)個(gè)人學(xué)習(xí)情況,所踩過的...
摘要:最近簡(jiǎn)單的研究了一下,對(duì)已經(jīng)有了一個(gè)簡(jiǎn)單的認(rèn)知,主要應(yīng)用于單頁面應(yīng)用,是很不錯(cuò)的框架。創(chuàng)建好之后,在命令行直接輸入即可,當(dāng)控制臺(tái)顯示服務(wù)已啟動(dòng)則表示該服務(wù)已經(jīng)啟動(dòng)成功了。配置參數(shù)中有一項(xiàng)為這項(xiàng)配置的就是我們即將使用的模板。 最近簡(jiǎn)單的研究了一下SSR,對(duì)SSR已經(jīng)有了一個(gè)簡(jiǎn)單的認(rèn)知,主要應(yīng)用于單頁面應(yīng)用,Nuxt是SSR很不錯(cuò)的框架。也有過調(diào)研,簡(jiǎn)單的用了一下,感覺還是很不錯(cuò)。但是還是...
摘要:感悟經(jīng)過幾個(gè)周六周日的嘗試,終于解決了服務(wù)端渲染中的常見問題,當(dāng)不在是問題的時(shí)候,或許才是我們搞前端的真正的春天,其中也遇到了一些小坑,官方還是很給力的,提后很積極的給予幫助,再次感謝的開發(fā)團(tuán)隊(duì)。 感悟 經(jīng)過幾個(gè)周六周日的嘗試,終于解決了服務(wù)端渲染中的常見問題,當(dāng)SEO不在是問題的時(shí)候,或許才是我們搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方還是很給力的,提issue后...
閱讀 2314·2021-11-08 13:13
閱讀 1245·2021-10-09 09:41
閱讀 1683·2021-09-02 15:40
閱讀 3186·2021-08-17 10:13
閱讀 2546·2019-08-29 16:33
閱讀 3122·2019-08-29 13:17
閱讀 3131·2019-08-29 11:00
閱讀 3295·2019-08-26 13:40