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 将元素显示在屏幕的中央的代码
Feb 27 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
使用vue实现通过变量动态拼接url
Jul 22 Javascript
vue设置默认首页的操作
Aug 12 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
我的群发邮件程序
2006/10/09 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
Open and Print a Word Document
2007/06/15 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
用Python一键搭建Http服务器的方法
2018/06/01 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
pytorch实现线性拟合方式
2020/01/15 Python
使用Python发现隐藏的wifi
2020/03/04 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
如何在django中运行scrapy框架
2020/04/22 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
成龙洗发水广告词
2014/03/14 职场文书
项目投资意向书
2014/04/01 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript