效果展示(后臺管理系統中常用)

如果你也需要如圖所示的效果 直接把下面的代碼粘貼過去即可
不需要父組件傳遞任何參數 十分好用；

基本思路:
監聽 $route 路由信息；
把當前的信息添加至數組，循環遍歷數組
當前的active樣式， 也是根據 當前的$route 里的path去決定的

代碼寫的很清楚了:

Tag

<template><div class="tag" v-if="showTags"><ul><li class="tags-li" v-for="(item,index) in list" :class="{'active': isActive(item.path)}" :key="index"><!--點擊每個小按鈕跳轉相應路由--><router-link :to="item.path" class="tags-li-title">{{item.title}}</router-link><span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span></li></ul><div class="handleTags"><el-dropdown @command="handleTags" size="mini" type="primary"><el-button type="primary">標簽選項<i class="el-icon-arrow-down el-icon--right"></i></el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item command="all">關閉所有</el-dropdown-item><el-dropdown-item command="other">關閉其他</el-dropdown-item></el-dropdown-menu></el-dropdown></div></div> </template><script>export default {name: "Tag",data() {return {list: []}},computed: {// 顯示隱藏面包屑showTags() {return this.list.length > 0;}},watch: {// 通過 監聽路由的變化$route(newValue, oldValue) {this.setTages(newValue)}},methods: {// 選中狀態 返回 true falseisActive(path) {return path === this.$route.fullPath;},// 標簽選項 關閉單個 關閉所有handleTags(command) {command === 'all' ? this.closeAll() : this.closeOther()},// 點擊關閉 單個 按鈕closeTags(index) {const delItem = this.list.splice(index, 1)[0]; // 獲取當前的const item = this.list[index] ? this.list[index] : this.list[index - 1]; // 獲取到下一個if (item) { // 有下一個 跳到下一個delItem.path === this.$route.fullPath && this.$router.push(item.path);} else { // 沒有 去 home頁面this.$router.push('/Home');}},// 點擊關閉 所有closeAll() {this.list = [];this.$router.push('/Home');},// 點擊關閉其他closeOther() {let currentList = this.list.filter((ele) => {return ele.path === this.$route.fullPath});this.list = currentList},// 展示的數組setTages(newValue) {const isExist = this.list.some(item => {return item.path === newValue.fullPath;});if (!isExist) {if (this.list.length >= 8) {this.list.shift();}this.list.push({title: newValue.meta.title,path: newValue.path,name: newValue.matched[1].components.default.name})}}}} </script><style scoped lang="scss">.handleTags > > > .el-button {padding: 7px 0;font-size: 12px;}.tag {width: 100%;display: flex;justify-content: space-between;align-items: center;}.tags {position: relative;height: 30px;overflow: hidden;background: #fff;padding-right: 120px;box-shadow: 0 5px 10px #ddd;}.tags ul {box-sizing: border-box;width: 100%;height: 100%;}.tags-li {float: left;margin: 3px 5px 2px 3px;border-radius: 3px;font-size: 12px;overflow: hidden;cursor: pointer;height: 23px;line-height: 23px;border: 1px solid #e9eaec;background: skyblue;padding: 0 5px 0 12px;vertical-align: middle;color: #666;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;transition: all .3s ease-in;}.tags-li:not(.active):hover {background: #f8f8f8;}.tags-li.active {color: #fff;}.tags-li-title {float: left;max-width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-right: 5px;color: #666;}.tags-li.active .tags-li-title {color: #fff;}.tags-close-box {position: absolute;right: 0;top: 0;box-sizing: border-box;padding-top: 1px;text-align: center;width: 110px;height: 30px;background: #fff;box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);z-index: 10;}</style>

在父組件中引入配置即可使用

總結

以上是生活随笔為你收集整理的Vue 封装面包屑 （即粘即用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。