明显可以看出,这个方法内调用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的监控是事件发起的开端,可考虑从这里修改;
您可能感兴趣的文章: