基于iview的router常用控制方式
1 iview的router控制需求
最近在使用iview框架写项目,遇到了一些路由控制上的问题,解决过程中也有一些心得,故在此记录下来.
每个项目在开发时,对于类似tags(标签页)的控制需求都不尽相同,故以下先列出本文所述项目对标签页的控制要求(如有不同需求,本文当也可提供一些思路):
- 对于同名(name)的路由标签页,不能打开多个.譬如说从商品列表中打开商品展示标签页,如果已经有在打开的商品编辑页面,则替换之.新打开的,未保存,已保存的标签页,同时只能存在一个(即不同params相同name的route只能有一个);
- 替换掉一个新的页面时,通过切换的方式切换回来(先切到其他标签页再切换回来),仍是原来页面的内容(即实际记录的params在替换后应变化).类似的情况,还应包含单据从未保存到已保存,以及保存并新增功能;
2 基于vue的router控制
iview是基于vue的框架,故vue本身自带的router控制方法是必然可行的.
vue变更路由的常用方式参考以下(该方法在官方api中有更详细的介绍):
//变更当前路由(有历史记录,建议使用此方式) this.$router.push({ name:'routerName', params:routerParam }) //变更当前路由(无历史记录) this.$router.replace({ name:'routerName', routerParam })
官方路由变更确实可以正常打开标签页,但在实现1中所提到的各种需求的时候,就有些不满足需求了.为此,需要参考3中,如何基于iview的outer控制.
3 基于iview的router控制
iview在控制路由的时候,使用vuex中的app.js来记录标签页路由信息,如果对vuex还是很了解的话,可以通过这篇博文来先打一下基础.
3.1 如何实现需求1.1
想要实现不同params相同name的route在iview中只能有一个,关键是改变iview对路由相等的判断方法,即'/src/libs/util.js'里的routeEqual方法:
/** * @description 根据name/params/query判断两个路由对象是否相等 * @param {*} route1 路由对象 * @param {*} route2 路由对象 */ export const routeEqual = (route1, route2) => { return route1.name === route2.name // 此处改变相同路由的判断方式,改为name相同即认为相同 // const params1 = route1.params || {} // const params2 = route2.params || {} // const query1 = route1.query || {} // const query2 = route2.query || {} // return (route1.name === route2.name) && objEqual(params1, params2) && objEqual(query1, query2) }
这里稍微解释下(如果不关注原因,可以直接看3.2).当改变路由时,'src\components\main\main.vue'作为近乎顶层的组件控制着近乎所有的全局逻辑,其中就有对路由的监控:
... <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList" > ... //此方法隶属于methods,用以监控side-menu的选择事件,即平时从左侧菜单打开标签页的逻辑 turnToPage (route) { let { name, params, query } = {} if (typeof route === 'string') name = route else { name = route.name params = route.params query = route.query } if (name.indexOf('isTurnByHref_') > -1) { window.open(name.split('_')[1]) return } this.$router.push({ name, params, query }) }, ... watch: { // 检测route的变化 $route (newRoute) { const { name, query, params, meta } = newRoute this.addTag({ route: { name, query, params, meta }, type: 'push' }) this.setBreadCrumb(newRoute) this.setTagNavList(getNewTagList(this.tagNavList, newRoute)) this.$refs.sideMenu.updateOpenName(newRoute.name) } }, ...
从以上代码可推测出,main.vue通过turnToPage方法实现打开标签页的逻辑,但方法内部并没有体现便签页显示效果变化(包含内部数据变化,以下同)的逻辑,这是由于显示效果变化的逻辑,由对$router的监控实现.
这样,不止从左侧菜单打开新标签页可以实现显示变化效果,其他只要使用vue的原版push等方法改变router的方法,均可监测到.
逐步查看下各个方法,其中影响当前标签页显示效果的,是'src/store/module/app.js'的addTag方法.
addTag (state, { route, type = 'unshift' }) { let router = getRouteTitleHandled(route) if (!routeHasExist(state.tagNavList, router)) { if (type === 'push') state.tagNavList.push(router) else { if (router.name === homeName) state.tagNavList.unshift(router) else state.tagNavList.splice(1, 0, router) } setTagNavListInLocalstorage([...state.tagNavList]) } },
尽管方法内部仍调用了很多,其中一个很重要的判断,就是routeHasExist(路由是否存在),这个方法也是判断是否为相同标签页的一个关键节点(该方法同样在util.js):
/** * 判断打开的标签列表里是否已存在这个新添加的路由对象 */ export const routeHasExist = (tagNavList, routeItem) => { let len = tagNavList.length let res = false doCustomTimes(len, (index) => { if (routeEqual(tagNavList[index], routeItem)) res = true }) return res }
明显可以看出,这个方法内调用routeEqual,就是用以判断是否为相同路由的实际方法(当然是通过比较新路由与已有路由进行比较),如此,仅需改变routeEqual即可.
以防万一,全局搜索下调用这个routeEqual的所有方法,发现所有调用的地方再routeEqual在改变后不会出现新的问题.
3.2 如何实现需求1.2
在进行3.1的操作后,问题得到了部分解决.余下的问题在于需求1.2没有得到实现和解决.
首先是,如何实现从列表中打开或新建的,替换原来的标签页,在来回切换后不会回到原来的标签页. 只需在app.js中注册改变标签页参数的方法:
// 变更指定路由的参数 changeTagParams (state, route) { let routeOldIndex = state.tagNavList.findIndex(m => routeEqual(m, route)) if (routeOldIndex !== -1) { let routeOld = state.tagNavList[routeOldIndex] routeOld.params = route.params state.tagNavList.splice(routeOldIndex, 1, routeOld) setTagNavListInLocalstorage([...state.tagNavList]) } },
然后在main.vue中对$route的监控最后引用即可.
watch: { // 检测route的变化 $route (newRoute) { const { name, query, params, meta } = newRoute this.addTag({ route: { name, query, params, meta }, type: 'push' }) this.setBreadCrumb(newRoute) this.setTagNavList(getNewTagList(this.tagNavList, newRoute)) this.$refs.sideMenu.updateOpenName(newRoute.name) // 增加路由参数变更环节 this.changeTagParams(newRoute) } },
其次,如果出现像保存并新增,或者从未保存到已保存,这两种情况来回切换后不会回到原来的情况.
保存并新增,关键是"新增"效果:
// 清空数据,该方法在保存后调用 clearData () { //该部分是用来清除当前route的参数 this.$router.push({ params: Object.assign(this.$route.params, { id: undefined }) }) //这部分代码是用来清空当前页面内容,每个模块都不尽相同,不必模仿 this.mOtherExpense = JSON.parse(JSON.stringify(this.mOtherExpenseInitial)) this.tableData = [{}] this.loadCode() this.mOtherExpense.openingDate = new Date() },
从未保存到已保存,关键同样是如何让route记住新的id(或其他参数):
// 设置路由id,该方法在第一次保存后调用 setData (id) { //这里的id是保存后从后台传来的新id this.$router.push({ params: Object.assign(this.$route.params, { id }) }) }
4 其他
文中已将本人常用的iview router控制方式提出,或有未涉及者,根据以下了解大概也可解决:
- app.js中的state.tagNavList是标签页中显示的标签集合;
- 如果要改变一些内容,main.vue中对$route的监控是事件发起的开端,可考虑从这里修改;

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
在浏览器中进行深度学习:TensorFlow.js (十二)异常检测算法
异常检测是机器学习领域常见的应用场景,例如金融领域里的信用卡欺诈,企业安全领域里的非法入侵,IT运维里预测设备的维护时间点等。我们今天就来看看异常检测的基本概念,算法,然后看看如何利用TensorflowJS来进行异常检测。 什么是异常点? 异常点是指数据中和其它点不一样的点,异常检测就是要找到这些点。通常有以下这些不同类型的异常: 点异常 Point Anomalies 单个点和其它数据显著的不同 上下文异常 Contextual Anomalies 数据在所在的上下文环境中是个异常,例如下图t1不是异常而t2是因为t2前后的数据和t2有显著的差异。 集合异常 Collective Anomalies. 集合异常是指一组数据点和其它的数据有显著的不同,这一组数据的集合构成异常 从数据维度的角度来看,异常也分为单变量(univariate)和多变量异常(multivariate)。 异常检测的算法主要包括基于统计的算法和基于机器学习的算法。 异常检测的统计学方法 利用统计方法来进行异常检测有两种,第一种是参数化的,就是假定正常的数据是基于某种参数分布的,那么我们可以通过训练数据估计出数...
- 下一篇
分布式时序数据库QTSDB的设计与实现
奇技指南 现有的开源时序数据库influxdb只支持单机运行,在面临大量数据写入时,会出现查询慢,机器负载高,单机容量的限制。 为了解决这一问题,360基础架构团队在单机influxdb的基础上,开发了集群版——QTSDB QTSDB 简述 QTSDB是一个分布式时间序列数据库,用于处理海量数据写入与查询。实现上,是基于开源单机时序数据库influxdb 1.7开发的分布式版本,除了具有influxdb本身的特性之外,还有容量扩展、副本容错等集群功能。 主要特点如下: 为时间序列数据专门编写的高性能数据存储, 兼顾写入性能和磁盘空间占用; 类sql查询语句, 支持多种统计聚合函数; 自动清理过期数据; 内置连续查询,自动完成用户预设的聚合操作; Golang编写,没有其它的依赖, 部署运维简单; 节点动态水平扩展,支持海量数据存储; 副本冗余设计,自动故障转移,支持高可用; 优化数据写入,支持高吞吐量; 系统架构 逻辑存储层次结构 influxdb架构层次最高是database,database下边根据数据保留时长不同分成了不同的retension policy,形成了databa...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- 2048小游戏-低调大师作品
- Mario游戏-低调大师作品
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7,8上快速安装Gitea,搭建Git服务器