Nuxt.js之⾃动路由原理的实现⽅法
Nuxt.js 是⼀个基于 Vue.js 的通⽤应⽤框架。集成了Vue 2、Vue-Router、 Vuex、Vue-Meta，⽤于开发完整⽽强⼤的 Web 应⽤。
它的特性有服务端渲染、强⼤的路由功能，⽀持异步数据、HTML头部标签管理等。
今天主要介绍的就是Nuxt的特性之⼀，强⼤的路由功能。nuxt.js会根据pages⽬录结构⾃动⽣成vue-router模块的路由配置。建议打开源码跟着⽂章的步骤看，第⼀次写，⽂中有任何错误或者表述不清的地⽅，欢迎批评指正。
⾸先介绍下nuxt路由的使⽤
nuxt会根据pages下的⽂件⾃动⽣成路由并引⼊，⽀持vue-router的基础路由，动态路由，嵌套路由等。基础路由很简单，需要注意的是，在使⽤动态路由时，需要创建对应的以下划线作为前缀的 Vue⽂件或⽬录
例如：
pages/
--| users/
-----| _id.vue
--| index.vue
Nuxt.js ⽣成对应的路由配置表为:
router: {
routes: [{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
}]
}
⽣成的动态路由， users-id 的路由路径带有 :id? 参数，表⽰该路由是可选的。如果你想将它设置为必选的路由，需要在users/_id ⽬录内创建⼀个 index.vue ⽂件。
其次需要注意的是在使⽤嵌套路由时，需要在pages下添加⼀个同名的Vue ⽂件，⽤来存放⼦视图组件。
例如：
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
Nuxt.js ⽣成对应的路由配置表为:
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'
}]
}]
}
接下来看为什么要这么写，包括怎么⾃动⽣成路由的原理。lodash有哪些方法
第⼀步
从npm run dev 说起，package.json 中，npm run dev 运⾏之后的命令是
dev : "PORT=3004backpack dev"
ps: Backpack是Node.js项⽬的简约的构建系统，在这⾥它⾃定义了⼀个配置fig.js扩展webpack，backpack dev 命令是以开发模式运⾏webpack。
第⼆步
再看⾃定义的fig.js，返回了server⽂件下的index.js
第三步
再查看index.js，在这⾥它搭建了服务器端⼝号，读取了fig⽂件，并且初始化了nuxt类。引⼊了node module中nuxt的Nuxt, Builder
第四步
现在可以去nuxt的源码看具体是怎么⾃动⽣成路由的了
在builder.js中，对所有⽂件进⾏打包，其中有⼀步就是构建路由
generateRoutesAndFiles, 它引⼊了glob库对page下的⽂件进⾏遍历，并进⾏了字符串的处理，最后将所有的vue⽂件地址，整个的项⽬地址和pages作为参数传给createRoutes 函数
第五步
再看createRoutes函数具体做了什么 (common/utils.js)
在createRoutes函数中对传过来的所有⽂件地址进⾏遍历，再对每⼀个⽂件地址字符串处理，以中划线进⾏拼接。以此作为route.name
再⽤lodash库对routes进⾏查，这⾥就可以看出为什么使⽤嵌套路由要在同路径下再加⼀个同名的vue⽂件，它的判断条件就是在routes中到 name：route.name的集合
如果有嵌套路由，暂时route.path为空，没有嵌套路由就直接以'/'拼接route.path，这⾥就可以看到动态路由的合成原理，如果是动态路由，route.path将会以 : 替换 _ ，末尾加上 ?
将route.name和route.path都放⼊routes中，进⾏排序，路径短的先放⼊，最后调⽤cleanChildrenRoutes函数，对嵌套路由进⾏处理。
⾄此对routes的path 和name的命名的处理已经结束。
第六步
再回到build.js中, 打包完后会⽣成模版⽂件，routes.js
在模版⽂件route.js中, 实例了项⽬的路由
并引⼊了路由组件，在引⼊时，将组件命名为下划线加上组件的hash值并去重引⼊
这样就是⼀个完整的⾃动⽣成路由的过程。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。