记一次对标签页与路由联动的处理方案

nzSelectChange(event) {
  this.currentIndex = event.index;
  const menu = this.menuList[this.currentIndex], temp = menu.url.indexOf('?');
  const params = temp === -1 ? null : this.getUrlParams(menu.url.substring(temp + 1, menu.url.length));
  const url = temp === -1 ? menu.url : menu.url.substring(0, temp === -1 ? menu.url.length : temp);

  this.router.navigate([url], {
    queryParams: params,  // 存放可能的参数
    skipLocationChange: true
  })
}

// Url 参数转 对象
getUrlParams(url) {
  if (url === '') return null;
  let hash, myJson = {}, hashes = url.slice(url.indexOf('?') + 1).split('&');
  for (let i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    myJson[hash[0]] = decodeURIComponent(hash[1]);
  }
  return myJson;
}

// 关闭选项标签
closeUrl(menu) {
  // 如果只有一个不可以关闭
  if (this.menuList.length === 1) return;

  // 如果当前只剩下父页面和对应子页面，则不可以关闭父页面
  if (this.menuList.length === 2) {
    if (this.menuList.some(item => item.isChild
      && (item.parComponent === menu.componentName || item.commonComponent === menu.componentName))) {
      return;
    }
  }

  // 当前关闭的是第几个路由
  const index = this.menuList.findIndex(p => p.url === menu.url);
  if (index === -1) {  // 子页面的子页面返回子页面时造成的  （坏笑
    return;
  }

  // 寻找可能存在的子页面
  const childComponent = this.menuList.filter(item => this.menuList[index].isChild === undefined
    && item.parComponent === this.menuList[index].componentName) || [];

  // 寻找可能存在的子页面的剩下子页面
  this.menuList.filter(item => this.menuList[index].isChild === undefined    // 本身必须是父页面
    && item.commonComponent === this.menuList[index].componentName // 祖先
    && item.parComponent !== this.menuList[index].componentName  // 不是第一个子页面
  ).forEach(item => {
    childComponent.push(item);
  });

  // 删除
  if (childComponent.length === 0) {
    this.deleteTabs(menu);
  } else {
    this.modal.confirm({
      nzContent: '【' + childComponent[0].title + '】页将一并关闭，是否继续？',
      nzCancelText: '否',
      nzOkText: '是',
      nzOkType: 'danger',
      nzOnOk: () => {
        childComponent.forEach(item => {
          this.deleteTabs(menu, item);
        })
      }
    });
  }
}

// 执行 Tab 删除
deleteTabs(menu, childComponent = null) {
  const index = this.menuList.findIndex(p => p.url === menu.url);
  const indexMenuParam = menu.url.indexOf('?');
  const path = menu.url.substring(0, indexMenuParam === -1 ? menu.url.length : indexMenuParam) + '_' + menu.componentName;
  this.menuList.splice(index, 1); // 删除父
  SimpleReuseStrategy.deleteRouteSnapshot(path); // 删除复用

  // 删除子
  if (childComponent) {
    const indexOfChild = this.menuList.findIndex(p => p.componentName === childComponent.componentName);
    const indexChildParam = childComponent.url.indexOf('?');
    const childPath = childComponent.url.substring(0, indexChildParam === -1 ? childComponent.url.length : indexChildParam)
      + '_' + childComponent.componentName;
    this.menuList.splice(indexOfChild, 1); // 删除子页面
    SimpleReuseStrategy.deleteRouteSnapshot(childPath);  // 删除子页面复用
  }

  this.settingsService.setMenuList(this.menuList);  // 记录

  // 如果当前删除的对象是当前选中的，那么需要跳转
  if (this.currentUrl === menu.url) {
    // 显示上一个选中
    let menu = this.menuList[index - 1];
    if (!menu) {// 如果上一个没有下一个选中
      menu = this.menuList[index];
    }
    // 跳转路由
    this.router.navigate([menu.url]);
  }
}