Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法

Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。集成了Vue 2、Vue-Router、 Vuex、Vue-Meta，用于開發(fā)完整而強(qiáng)大的 Web 應(yīng)用。

創(chuàng)新互聯(lián)公司是專業(yè)的興安網(wǎng)站建設(shè)公司，興安接單;提供成都做網(wǎng)站、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行興安網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

它的特性有服務(wù)端渲染、強(qiáng)大的路由功能，支持異步數(shù)據(jù)、HTML頭部標(biāo)簽管理等。

今天主要介紹的就是Nuxt的特性之一，強(qiáng)大的路由功能。nuxt.js會(huì)根據(jù)pages目錄結(jié)構(gòu)自動(dòng)生成vue-router模塊的路由配置。

nuxt源碼地址： https://github.com/nuxt/nuxt.js

建議打開源碼跟著文章的步驟看，第一次寫，文中有任何錯(cuò)誤或者表述不清的地方，歡迎批評(píng)指正。

首先介紹下nuxt路由的使用

nuxt會(huì)根據(jù)pages下的文件自動(dòng)生成路由并引入，支持vue-router的基礎(chǔ)路由，動(dòng)態(tài)路由，嵌套路由等?；A(chǔ)路由很簡單，需要注意的是，在使用動(dòng)態(tài)路由時(shí)，需要?jiǎng)?chuàng)建對(duì)應(yīng)的以下劃線作為前綴的 Vue文件或目錄

例如：

pages/
--| users/
-----| _id.vue
--| index.vue

Nuxt.js 生成對(duì)應(yīng)的路由配置表為:

router: {
 routes: [{
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
   },
   {
   name: 'users-id',
   path: '/users/:id?',
   component: 'pages/users/_id.vue'
   }]
  }

生成的動(dòng)態(tài)路由， users-id 的路由路徑帶有 :id? 參數(shù)，表示該路由是可選的。如果你想將它設(shè)置為必選的路由，需要在 users/_id 目錄內(nèi)創(chuàng)建一個(gè) index.vue 文件。

其次需要注意的是在使用嵌套路由時(shí)，需要在pages下添加一個(gè) 同名的Vue 文件，用來存放子視圖組件。

例如：

pages/
--| users/
-----| _id.vue 
-----| index.vue 
--| users.vue

Nuxt.js 生成對(duì)應(yīng)的路由配置表為:

 router: {
 routes: [{
  path: '/users',
  component: 'pages/users.vue',
   children: [{
   path: '',
   component: 'pages/users/index.vue',
   name: 'users'
   },
   {
   path: ':id',
   component: 'pages/users/_id.vue',
   name: 'users-id'
   }]
  }]
 }

接下來看為什么要這么寫，包括怎么自動(dòng)生成路由的原理。

第一步

從npm run dev 說起，package.json 中，npm run dev 運(yùn)行之后的命令是

dev : "PORT=3004backpack dev"

ps: Backpack是Node.js項(xiàng)目的簡約的構(gòu)建系統(tǒng)，在這里它自定義了一個(gè)配置backpack.config.js擴(kuò)展webpack，backpack dev命令是以開發(fā)模式運(yùn)行webpack。

第二步

再看自定義的backpack.config.js,返回了server文件下的index.js

第三步

再查看index.js，在這里它搭建了服務(wù)器端口號(hào)，讀取了nuxt.config文件，并且初始化了nuxt類。引入了node module中nuxt的Nuxt, Builder

第四步

現(xiàn)在可以去nuxt的源碼看具體是怎么自動(dòng)生成路由的了
在builder.js中,對(duì)所有文件進(jìn)行打包，其中有一步就是構(gòu)建路由

generateRoutesAndFiles, 它引入了glob庫對(duì)page下的文件進(jìn)行遍歷，并進(jìn)行了字符串的處理，最后將所有的vue文件地址，整個(gè)的項(xiàng)目地址和pages作為參數(shù)傳給createRoutes 函數(shù)

第五步

再看createRoutes函數(shù)具體做了什么 (common/utils.js)
在createRoutes函數(shù)中對(duì)傳過來的所有文件地址進(jìn)行遍歷，再對(duì)每一個(gè)文件地址字符串處理，以中劃線進(jìn)行拼接。以此作為route.name

再用lodash庫對(duì)routes進(jìn)行查找，這里就可以看出為什么使用嵌套路由要在同路徑下再加一個(gè)同名的vue文件，它的判斷條件就是在routes中找到 name：route.name的集合

如果有嵌套路由，暫時(shí)route.path為空，沒有嵌套路由就直接以'/'拼接route.path，這里就可以看到動(dòng)態(tài)路由的合成原理，如果是動(dòng)態(tài)路由，route.path將會(huì)以 : 替換 _ ,末尾加上 ?

將route.name和route.path都放入routes中，進(jìn)行排序，路徑短的先放入，最后調(diào)用cleanChildrenRoutes函數(shù)，對(duì)嵌套路由進(jìn)行處理。

至此對(duì)routes的path 和name的命名的處理已經(jīng)結(jié)束。

第六步

再回到build.js中, 打包完后會(huì)生成模版文件，routes.js

在模版文件route.js中, 實(shí)例了項(xiàng)目的路由

并引入了路由組件，在引入時(shí)，將組件命名為下劃線加上組件的hash值并去重引入

這樣就是一個(gè)完整的自動(dòng)生成路由的過程。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法
地址分享：http://bm7419.com/article24/pcidje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)頁設(shè)計(jì)公司、面包屑導(dǎo)航、域名注冊(cè)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)