基于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-menuaccordionref="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)  }},...