vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 动态面包屑

Vue3实现动态面包屑的代码示例

作者:前端随想

这篇文章主要给大家介绍一下Vue3动态面包屑是如何实现的,实现思路又是什么,以及发给大家介绍一下面包屑的功能,文章通过代码示例介绍的非常详细,需要的朋友可以参考下

前言

在进行项目开发的过程中,我们一般会使用面包屑的功能,这个功能还是比较常见的,那么他的实现思路是什么呢?

面包屑的介绍和实现思路✍️✍️

首先我们先来了解一下面包屑功能,这个功能其实就是根据路由的地址,来动态的生成导航菜单,今后在路由发生变化的时候,这个导航菜单也会动态的发生变化,就像下面展示的这样:

那么像这样的功能我们该如何实现呢?

因此完成面包屑组件的关键就是在于获取相应路由数据上面,这就是典型的数据驱动

获取路由数据⚡️⚡️

我们要实现这个功能就需要用到route.matched,代码如下

//首先实例化获取当前路由
const route=useRoute()
//然后调用route.matched

对route.matched的理解

首先我们来看官方给出的解释:

官方解释: 与给定路由地址匹配的标准化的路由记录数组。

个人理解:我个人的理解就是从根据你访问的路由,然后向上找,找到当前路由的根路由然后返回一个数组,这个数组包含的就是你当前访问的路由加上根路由,可能这么说你还是不是很理解,那么我就举一个例子:

const router=[{
  path: "/user",
  component: Layout
  children: [
    {path: "/user/manage", component:Manage },
    {path: "/user/info/:id", component:userInfo   },
    {path: "/user/import",  component:import  },
  ],
}]

这里不做路由的细节展示,只是为了说明一个例子,如果我们访问/user/manage这个地址的时候,此时如果我们使用route.matched打印结果会得到如下结果:

[  { path: '/user', component: Layout,children:[...所有的子路由] },
  { path: '/user/manage', component: Manage }
]

这样我们就能根据获取的数组来进行面包屑的渲染了。

开始完成动态面包屑🥊🥊

在进行完前期的铺垫之后,我们就可以开始完成动态的面包屑了

封装面包屑组件:

我们查看element-plus官网的相关信息之后,发现要实现面包屑的功能需要使用这两个组件

废话不多说直接展示源码:

首先是布局部分

<template>
  <div>
    <el-breadcrumb class="breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item
          v-for="(item, index) in breadcrumbData"
          :key="item.path"
        >
          <!-- 不可以点击项 -->
          <span
            v-if="index === breadcrumbData.length - 1"
            class="no-redirect"
            >{{ item.meta.title }}</span
          >
          <!-- 可以点击项 -->
          <a v-else class="redirect" @click.prevent="onLinkClick(item)">{{
            item.meta.title
          }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

第一部分的代码就是根据获取的路由数据进行面包屑的渲染,使用了v-for来进行el-breadcrumb-item的渲染,我们在这里规定了数组的最后一项是不可被点击的,并且给它指定了样式,然后其他项就可以被点击,并且绑定了点击事件,将渲染的item传递过去,我们重点来讲解一下js这部分的代码。

js部分的代码:

<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
const route = useRoute();
const router = useRouter();
// 生成数组数据
const breadcrumbData = ref([]);
const getBreadcrumbData = () => {
  console.log(route.matched);
  breadcrumbData.value = route.matched.filter((item) => {
    return item.meta && item.meta.title;
  });
};
// 监听路由发生改变时触发
watch(
  route,
  () => {
    getBreadcrumbData();
  },
  {
    immediate: true,
  }
);
// 处理点击事件
const onLinkClick = (item) => {
  router.push(item.path);
};
// 如果将来需要进行主题替换,所以这里获取下动态样式
const store = useStore();
// eslint-disable-next-line
const linkHoverColor = ref(store.getters.globalCss.breadCrumbColor);
</script>

动画样式的完成

.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}
​
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}
​
.breadcrumb-leave-active {
  position: absolute;
}

基本的样式的完成:

.breadcrumb {
  display: flex;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
  .redirect {
    color: #666;
    font-weight: 600;
  }
  .redirect:hover {
    // 将来需要进行主题替换,所以这里不去写死样式,这个是vue3的新增特性
    color: v-bind(linkHoverColor);
  }
}

到这一步我们的面包屑功能就算完成了,具体的演示我在一开始就进行了,大家可以参考我的代码进行实现。

总结🐰🐰

面包屑这个东西我在很早之前实现过,不过那个时候还是学vue2的时候,再加上时间间隔的比较长,因此有些生疏了,今天在来实现一下,巩固一下原有的知识,做一个总结。

以上就是Vue3实现动态面包屑的代码示例的详细内容,更多关于Vue3 动态面包屑的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文