基于iview的router常用控制方式


Posted in Javascript onMay 30, 2019

1 iview的router控制需求

最近在使用iview框架写项目,遇到了一些路由控制上的问题,解决过程中也有一些心得,故在此记录下来.
每个项目在开发时,对于类似tags(标签页)的控制需求都不尽相同,故以下先列出本文所述项目对标签页的控制要求(如有不同需求,本文当也可提供一些思路):

  1. 对于同名(name)的路由标签页,不能打开多个.譬如说从商品列表中打开商品展示标签页,如果已经有在打开的商品编辑页面,则替换之.新打开的,未保存,已保存的标签页,同时只能存在一个(即不同params相同name的route只能有一个);
  2. 替换掉一个新的页面时,通过切换的方式切换回来(先切到其他标签页再切换回来),仍是原来页面的内容(即实际记录的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的监控是事件发起的开端,可考虑从这里修改;

Javascript 相关文章推荐
JavaScript设计模式之外观模式实例
Oct 10 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
js获取内联样式的方法
Jan 27 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
深入了解js原型模式
May 30 #Javascript
js逆向解密之网络爬虫
May 30 #Javascript
Vue.js中的组件系统
May 30 #Javascript
Vue+Django项目部署详解
May 30 #Javascript
了解重排与重绘
May 29 #Javascript
小程序如何构建骨架屏
May 29 #Javascript
新手简单了解vue
May 29 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
十天学会php之第二天
2006/10/09 PHP
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
php实现每日签到功能
2018/11/29 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jquery常用操作小结
2014/07/21 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python实现按中文排序的方法示例
2018/04/25 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
计算机本科生自荐信
2013/10/15 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
通信工程求职信
2014/07/16 职场文书
司机工作自我鉴定
2014/09/19 职场文书
迎国庆横幅标语
2014/10/08 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
教师听课评语大全
2014/12/31 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python