image-20230104123514646

要实现如上静态与动态面包屑的功能。

静态面包屑：

主要借助elemt-plus中的el-breadcrumb来实现

$route.matched是给定路由地址匹配的标准化的路由记录数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 左侧面包屑 -->
<el-breadcrumb separator-icon="ArrowRight">
  <!-- 面包动态展示路由名字与标题 -->
  <el-breadcrumb-item
    v-for="(item, index) in $route.matched"
    :key="index"
    v-show="item.meta.title"
    :to="item.path"
  >
    <!-- 图标 -->
    <el-icon>
      <component :is="item.meta.icon"></component>
    </el-icon>
    <!-- 面包屑展示匹配路由的标题 -->
    <span>{{ item.meta.title }}</span>
  </el-breadcrumb-item>
</el-breadcrumb>

动态面包屑：

展示方式主要是由el-tag来实现

获取到小仓库中的useStore.tabList数组遍历展示成tag标签，携带click、close函数，click实现跳转，close实现标签关闭。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app" class="grid-content">
  <el-tag
    class="grid-tag"
    v-for="(item, index) in useStore.tabList"
    :key="item.path"
    closable
    :effect="$route.meta.title === item.meta.title ? 'dark' : 'plain'"
    @click="clickTags(item)"
    @close="handleTag(index)"
    size="default"
  >
    {{ item.meta.title }}
  </el-tag>
</div>

click实现跳转，close实现标签关闭函数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//点击菜单的回调

const clickTags = (item: any) => {
  $router.push(item.path)
}
// 点击删除按钮，删除TAG
const handleTag = (index: any) => {
  closeTag(index)
  // 删除后的tags的长度
  const length = useStore.tabList.length

  // 点击删除的tag是最后一个
  if (index === length) {
    $router.push(useStore.tabList[length - 1].path)
  }
}
// 删除指定tag标签
const closeTag = (index: any) => {
  useStore.tabList.splice(index, 1)
}

子路由通过点击事件来对useStore.tabList数据更新

1
2
3
4
5
6
7
//点击菜单的回调
const goRoute = (vc: any) => {
  console.log('vc', vc)
  //路由跳转
  $router.push(vc.path)
  useStore.SELECTMENU(vc)
}

小仓库中更新数据如下：

1
2
3
4
5
6
7
8
9
10
11
12
SELECTMENU(val: any) {
  // 判断添加的数据是否为首页

  const index = this.tabList.findIndex(
    (item: any) => item.name === val.name,
  )
  // 当Index为-1时，表示tabList中没有，则可以添加面包屑
  if (index === -1) {
    this.tabList.push(val)
  }
  console.log('this.tabList', this.tabList)
},