Nuxt.js之自动路由原理的实现方法


Posted in Javascript onNovember 21, 2018

Nuxt.js 是一个基于 Vue.js 的通用应用框架。集成了Vue 2、Vue-Router、 Vuex、Vue-Meta,用于开发完整而强大的 Web 应用。

它的特性有服务端渲染、强大的路由功能,支持异步数据、HTML头部标签管理等。

今天主要介绍的就是Nuxt的特性之一,强大的路由功能。nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。

nuxt源码地址: https://github.com/nuxt/nuxt.js

建议打开源码跟着文章的步骤看,第一次写,文中有任何错误或者表述不清的地方,欢迎批评指正。

首先介绍下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'
   }]
  }]
 }

接下来看为什么要这么写,包括怎么自动生成路由的原理。

第一步

从npm run dev 说起,package.json 中,npm run dev 运行之后的命令是

dev : "PORT=3004backpack dev"

ps: Backpack是Node.js项目的简约的构建系统,在这里它自定义了一个配置backpack.config.js扩展webpack,backpack dev命令是以开发模式运行webpack。

第二步

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

Nuxt.js之自动路由原理的实现方法

第三步

再查看index.js,在这里它搭建了服务器端口号,读取了nuxt.config文件,并且初始化了nuxt类。引入了node module中nuxt的Nuxt, Builder

Nuxt.js之自动路由原理的实现方法

第四步

现在可以去nuxt的源码看具体是怎么自动生成路由的了
在builder.js中,对所有文件进行打包,其中有一步就是构建路由

generateRoutesAndFiles, 它引入了glob库对page下的文件进行遍历,并进行了字符串的处理,最后将所有的vue文件地址,整个的项目地址和pages作为参数传给createRoutes 函数

Nuxt.js之自动路由原理的实现方法

第五步

再看createRoutes函数具体做了什么 (common/utils.js)
在createRoutes函数中对传过来的所有文件地址进行遍历,再对每一个文件地址字符串处理,以中划线进行拼接。以此作为route.name

Nuxt.js之自动路由原理的实现方法

再用lodash库对routes进行查找,这里就可以看出为什么使用嵌套路由要在同路径下再加一个同名的vue文件,它的判断条件就是在routes中找到 name:route.name的集合

如果有嵌套路由,暂时route.path为空,没有嵌套路由就直接以'/'拼接route.path,这里就可以看到动态路由的合成原理,如果是动态路由,route.path将会以 : 替换 _ ,末尾加上 ?

Nuxt.js之自动路由原理的实现方法

将route.name和route.path都放入routes中,进行排序,路径短的先放入,最后调用cleanChildrenRoutes函数,对嵌套路由进行处理。

至此对routes的path 和name的命名的处理已经结束。

第六步

再回到build.js中, 打包完后会生成模版文件,routes.js

在模版文件route.js中, 实例了项目的路由

并引入了路由组件,在引入时,将组件命名为下划线加上组件的hash值并去重引入

Nuxt.js之自动路由原理的实现方法

这样就是一个完整的自动生成路由的过程。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
详解jQuery中的事件
Dec 14 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 #Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 #Javascript
详解nuxt路由鉴权(express模板)
Nov 21 #Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 #Javascript
Angular刷新当前页面的实现方法
Nov 21 #Javascript
详解ES6系列之私有变量的实现
Nov 21 #Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
You might like
php实现singleton()单例模式实例
2014/11/06 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
Python实现简易端口扫描器代码实例
2017/03/15 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
教师求职信范文
2014/05/24 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
档案管理员岗位职责
2015/02/12 职场文书
员工聘用合同范本
2015/09/21 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
什么是SOLID
2022/03/24 Javascript