Vue+elementを使用してページ上部のタグを実装する方法の詳細な説明

 addTag: (状態、タグ) => {
    const { fullPath, path, meta, query } = タグ
    if (tag.path === '/login') {
      偽を返す
    }
    const findIndex = state.tags.findIndex(item => item.path === tag.path)
    console.log(インデックスを検索)
    （検索インデックス >= 0）の場合{
      state.tags.splice(findIndex, 1, { fullPath, パス, メタ, クエリ })
    } それ以外 {
      state.tags.push({ fullPath, パス, メタ, クエリ })
    }
  },

計算: {
現在のルート() {
      これを返します。$route
    },
},
 時計：
    $ルート: {
      ハンドラ(val) {
        if (val.name) {
          タグを追加します()
        }
      },
      // 深い監視監視 deep: true
    }
  },
  方法:{
  タグを追加します（）{
  //this.$store.dispatch は最初にアクションに送信され、ミューテーション内のメソッドを非同期的に処理し、状態の tags 値を変更します。this.$store.dispatch('user/addTag', this.currentRoute)
    },}

<span v-for="(tag, index) タグ内" :key="index" class="tag-span">
        <elタグ
          :closable="閉じることができる"
          :effect="setTagColor(タグ)"
          @close="タグを閉じる(タグ)"
          @click="toTagRoute(タグ)"
        >
          {{ tag.meta.title }}
        </el-tag>
      </span>
 方法:{
 setTagColor(タグ) {
      this.currentRoute.path === tag.path ? 'dark' : 'plain' を返します
    },
    }

方法:{
 toTagRoute(タグ) {
      this.$router.push({
        パス: tag.fullPath || tag.path
      })
    },
}

方法:{
	 閉じるタグ(タグ) {
	      console.log(タグ、4444)
	      this.$store.dispatch('user/delTag', タグ)
	      this.toLastTagRouter(this.$store.state.user.tags)//削除する前のタグを強調表示します
	    },
     toLastTagRouter(タグ) {
      //ここで渡されたタグは削除されるため、splice==》を使用して元の配列を変更することはできません。slice==》は元の配列を変更せず、配列の最後の要素を取得します。const latestView = tags.slice(-1)[0] //タグ配列の最後の要素 console.log(latestView)
      （latestView !== 未定義 && latestView.path !== 未定義）の場合 {
        const { fullPath, meta, path, query } = latestView
        this.$router.push({ fullPath, meta, path, query })
      }
    },
}
//アクション
 delTag({ コミット }, タグ) {
    commit('delTag', タグ)
  },
//突然変異
delTag: (状態、タグ) => {
    //entries() オブジェクトはトラバース可能な配列 [0, {name: a, age: '20'}] になります
    //ForEachとmapもここで使用できます for (const [i, v] of state.tags.entries()) {
      (v.path === tag.path) の場合 {
        状態.タグ.スプライス(i, 1)
        壊す
      }
    }
  },

方法:{
 すべてのタグを閉じる() {
      // すべてのタグを閉じて、1 つのタグだけを残します。this.$store.dispatch('user/delAllTags')
      const { fullPath, meta, path, query } = this.$store.state.user.tags[0]
      // 残りのタグルートにジャンプします this.$router.push({ fullPath, meta, path, query })
    },
}
//アクション
delAllTags({ コミット }) {
    コミット('delAllTags')
  },
//突然変異
 delAllTags: (状態) => {
    状態タグの連結(1, 状態タグの長さ)
  },