基于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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
Postman如何实现参数化执行及断言处理
Jul 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
SONY SRF-M100的电路分析
2021/03/02 无线电
php实现paypal 授权登录
2015/05/28 PHP
PHP chop()函数讲解
2019/02/11 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
jQuery实现冻结表格行和列
2015/04/29 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python中一行和多行import模块问题
2018/04/01 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
学习退步检讨书
2014/09/28 职场文书
龙猫观后感
2015/06/09 职场文书
欠条范文
2015/07/03 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
Sql Server之数据类型详解
2022/02/28 SQL Server
使用python绘制分组对比柱状图
2022/04/21 Python