1 iview的router控制需求

最近在使用iview框架寫項(xiàng)目,遇到了一些路由控制上的問題,解決過程中也有一些心得,故在此記錄下來.
每個(gè)項(xiàng)目在開發(fā)時(shí),對(duì)于類似tags(標(biāo)簽頁)的控制需求都不盡相同,故以下先列出本文所述項(xiàng)目對(duì)標(biāo)簽頁的控制要求(如有不同需求,本文當(dāng)也可提供一些思路):

對(duì)于同名(name)的路由標(biāo)簽頁,不能打開多個(gè).譬如說從商品列表中打開商品展示標(biāo)簽頁,如果已經(jīng)有在打開的商品編輯頁面,則替換之.新打開的,未保存,已保存的標(biāo)簽頁,同時(shí)只能存在一個(gè)(即不同params相同name的route只能有一個(gè)); 替換掉一個(gè)新的頁面時(shí),通過切換的方式切換回來(先切到其他標(biāo)簽頁再切換回來),仍是原來頁面的內(nèi)容(即實(shí)際記錄的params在替換后應(yīng)變化).類似的情況,還應(yīng)包含單據(jù)從未保存到已保存,以及保存并新增功能;

2 基于vue的router控制

iview是基于vue的框架,故vue本身自帶的router控制方法是必然可行的.

vue變更路由的常用方式參考以下(該方法在官方api中有更詳細(xì)的介紹):

//變更當(dāng)前路由(有歷史記錄,建議使用此方式)this.$router.push({  name:'routerName',  params:routerParam})//變更當(dāng)前路由(無歷史記錄)this.$router.replace({  name:'routerName',  routerParam})

官方路由變更確實(shí)可以正常打開標(biāo)簽頁,但在實(shí)現(xiàn)1中所提到的各種需求的時(shí)候,就有些不滿足需求了.為此,需要參考3中,如何基于iview的outer控制.

3 基于iview的router控制

iview在控制路由的時(shí)候,使用vuex中的app.js來記錄標(biāo)簽頁路由信息,如果對(duì)vuex還是很了解的話,可以通過這篇博文來先打一下基礎(chǔ).

3.1 如何實(shí)現(xiàn)需求1.1

想要實(shí)現(xiàn)不同params相同name的route在iview中只能有一個(gè),關(guān)鍵是改變iview對(duì)路由相等的判斷方法,即'/src/libs/util.js'里的routeEqual方法:

/** * @description 根據(jù)name/params/query判斷兩個(gè)路由對(duì)象是否相等 * @param {*} route1 路由對(duì)象 * @param {*} route2 路由對(duì)象 */export const routeEqual = (route1, route2) => { return route1.name === route2.name // 此處改變相同路由的判斷方式,改為name相同即認(rèn)為相同 // 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)}

這里稍微解釋下(如果不關(guān)注原因,可以直接看3.2).當(dāng)改變路由時(shí),'src/components/main/main.vue'作為近乎頂層的組件控制著近乎所有的全局邏輯,其中就有對(duì)路由的監(jiān)控:

...<side-menuaccordionref="sideMenu":active-name="$route.name":collapsed="collapsed"@on-select="turnToPage":menu-list="menuList">...  //此方法隸屬于methods,用以監(jiān)控side-menu的選擇事件,即平時(shí)從左側(cè)菜單打開標(biāo)簽頁的邏輯  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: {  // 檢測(cè)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)  }},...