多页签模式下的页签内切换页面

问题描述:在多页签模式下,无论是 $router.push()还是 $router.replace()都会打开一个新的页签,但是有些递进的页面就不需要保留上一个页面,这时就需要在页签内替换页面

1、写一个判断路由的方法,返回布尔值


//设置页签内需要替换路由的数组(以路由的name值为条件)
export const list = [
  //  从页面1跳转到页面2
  {from:'page1',to:'page2'},
  。。。more
]

//通过前后路由的name判断该路由是替换还是添加
export function needRemoveFrom(a,b){
  for(let i in list){
    if(list[i].from==b && list[i].to==a){
      return true
    }
  }
  return false
}

2、监听路由
(在页签组件:src/components/MultiTab/MultiTab.vue 中找到监听事件)


  watch: {
    '$route': function (newVal,oldVal) {
    
      //  在这里加入以下判断条件,本页面其余代码不动
      if(needRemoveFrom(newVal.name,oldVal.name)) {
        this.closeThat(oldVal.fullPath)
      }
      
    }
  },
Logo

前往低代码交流专区

更多推荐