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

更新時間：2018年11月21日 11:27:04 作者：lemon

這篇文章主要介紹了Nuxt.js之自動路由原理的實現(xiàn)方法，nuxt.js會根據(jù)pages目錄結(jié)構(gòu)自動生成vue-router模塊的路由配置。非常具有實用價值，需要的朋友可以參考下

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

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

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

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

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

首先介紹下nuxt路由的使用

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

例如：

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

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

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

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

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

例如：

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

Nuxt.js 生成對應(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'
   }]
  }]
 }

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

第一步

從npm run dev 說起，package.json 中，npm run dev 運行之后的命令是