Vue3 usa comunicação de componente pai-filho para implementar a função de guia de página

1. Processo geral

2. Conhecimento Vue3 usado

1. Comunicação de componentes

(1) Pai para filho

No vue3, os componentes pais usam ligações e adereços para passar valores aos componentes filhos.

Como a matriz de guias precisa ser colocada na página pai,

  data(){
    return {
      tabs: []
    }
  },

Portanto, a barra superior precisa obter a matriz de guias da página pai

Primeiro defina os adereços na aba para receber

  props:{
    tabs: Array // 声明一个 props，指定数据类型为数组
  },

Em seguida, vincule-o ao caractere :binding na tag da página filha na página pai

  <NavBar :tabs="tabs" ></NavBar>

Dessa forma, a matriz de guias da página pai pode ser passada para a página filha.

(2) O Filho dá ao Pai

Como há uma rota na página filha para pular para uma nova página, você precisa adicionar uma guia, ou seja, adicionar a nova página como uma guia à matriz de guias, e a matriz de guias é colocada na página pai, então o filho precisa passar o valor para o pai.

O filho transfere o valor para o pai chamando um método usando this.$emit("nome da comunicação", dados)

Por exemplo, a operação de adicionar uma guia aqui é

     this.$emit("addtab",tab)

Em seguida, use @ na tag filha da página pai para aceitar o nome da comunicação e vincular o método a ser chamado.

 <router-view  @addtab="addTab"></router-view>

 Ao mesmo tempo, passe os dados para o método como parâmetro de dados.

    addTab(data) {
      //最简单的push操作,还没完成其它逻辑
      this.tabs.push(data);

    }

3. Implemente a lógica geral

1. Na página pai

(1) Escreva a lógica para adicionar guias

    addTab(data) {
      // this.tabs.push(data);
        // 判断是否已存在相同的 title 和 route
        const exists = this.tabs.some(tab => tab.title === data.title && tab.route === data.route);
        if (!exists) {
          this.tabs.forEach(tab => {
            tab.selected = false;
          });
          this.tabs.push(data);
        }else{
          this.tabs.forEach(tab => {
            tab.selected = tab.title === data.title && tab.route === data.route;
          });
        }

        // 更新浏览器缓存
      this.saveTabsToLocalStorage()
    }

(2) Escreva a lógica para fechar a guia

    closeTab(index) {
      this.tabs.splice(index, 1); // 从数组中移除页签

      if (this.tabs.length > 0) {
        this.tabs.forEach(tab => {
          tab.selected = false;
        });
        // 如果还有其他选项卡，跳转到最后一个选项卡的路由
        const lastTab = this.tabs[this.tabs.length - 1];
        this.$router.push(lastTab.route);
        this.tabs[this.tabs.length - 1].selected=true;
      } else {
        // 如果没有选项卡了，跳转到默认的首页路由
        this.$router.push("/1/C");
      }

      // 更新浏览器缓存
      this.saveTabsToLocalStorage()
    },

(3) Armazenando em cache a matriz de guias no navegador e carregando-a do cache

 mounted() {
    this.loadTabsFromLocalStorage();
  },
  methods:{
    // 缓存到本地
    saveTabsToLocalStorage() {
      localStorage.setItem('tabs', JSON.stringify(this.tabs));
    },
    // 从缓存加载
    loadTabsFromLocalStorage() {
      const storedTabs = localStorage.getItem('tabs');
      if (storedTabs) {
        this.tabs = JSON.parse(storedTabs);
      }
    },
  }

Armazene em cache os dados da guia no navegador. Quando a página é atualizada, o status da guia mantém o status atual e não será limpo.

(4) Comunique-se com a barra superior

<NavBar :tabs="tabs" @asideCollapse="collapse" @closetab="closeTab">

(5) Comunique-se com subpáginas que precisam gerar guias

<router-view  @addtab="addTab"></router-view>

2. Barra superior

(1) Aba Renderização

    <div class="top-bar">
      <!-- 渲染页签 -->
      <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab', { 'selected': tab.selected }]"
          @click="switchTab(tab)"
      >
        {
   
   { tab.title }}
        <span class="close-btn" @click.stop="closeTab(index)">×</span>
      </div>
    </div>

(2) Escrever estilo de guia

<style lang="scss" scoped>
 
.top-bar{
  display: flex;
  margin-left: 20px;
  caret-color: transparent; /*去除鼠标光标*/
  width: 100vw;
  overflow-x: auto; /* 允许横向滚动 */
  //overflow: hidden;

  div:hover{
       cursor:pointer;
    }

  div:not(:first-child){
    margin-left: 10px;
  }

  div{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    //width: 100%;
    height: 30px;

    white-space: nowrap; /* 防止内容换行 */
    span{
      width: 15px;
      height: 15px;
      margin-left: 4px;
      display: flex;
      align-items: center;
      justify-content: center;


    }


  }

  .tab{
    background-color: #eeeeee;

    span:hover{
      background: linear-gradient(rgba(96, 98, 102, 0.1), rgba(96, 98, 102, 0.1)); /* 在悬停时更改透明度 */
    }
  }

  .selected{
    background-color: #c6fce5;

  }
}

</style>

(3) Aceitar dados da página pai

  props:{
    tabs: Array // 声明一个 props，指定数据类型为数组
  },

(4) Envie uma solicitação para fechar a guia da página pai

    // 关闭页签
    closeTab(index) {
      this.$emit("closetab",index)
    },

3. Subpágina

(1) Envie uma solicitação para adicionar uma guia à página pai

  methods:{
   addTab(tab){
     this.$emit("addtab",tab)
   }

  }

 (2) Solicitações de vinculação de rótulo com requisitos de roteamento de salto

 Por exemplo, itens de menu

        <el-menu-item index="/1/C" 
        @click="addTab({
        title: '模拟计算', // 页面标题
        route: '/1/C', // 路由
        selected: true // 设置选中状态
        })"
        >

4. Efeito de exibição

5. Possíveis erros

1. Ele roda sem erros no ambiente local e será reportado após ser implantado no ambiente de produção.

TypeError: Não é possível ler propriedades de null (lendo 'insertBefore' )

solução 

(1) A matriz de guias de renderização v-for no componente da barra superior NavBar não determina se as guias estão vazias.

(2) Mude o vue para a versão ([email protected]) para corrigi-lo.

npm i [email protected]