如何实现Vue中的动态面包屑导航功能？

本文共计1475个文字，预计阅读时间需要6分钟。

面包屑应用应是我们项目中经常使用的一个功能，一般情况它用来表示我们当前所处的站点位置，也可以帮助我们更快地回到上一层级。今天我们就来聊聊如何在Vue项目中实现面包屑功能。

面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级。

今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能。以下案例都是使用 Element-UI 进行实现。

最笨的方式

首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好。

<template> <div class="example-container"> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="{ path: item.path }" >{{item.name}}</el-breadcrumb-item> </el-breadcrumb> </div> </template> <script> export default { name: "Example", data() { return { breadList: [{ name: "首页", path: "/home" }, { name: "系统设置", path: "/setting" }, { name: "用户管理", path: "/setting/usermanage" }] }; } }; </script>

如果按照上述方式去实行的话，虽然我们可以完成面包屑的功能，但是它不够灵活，在每个需要的页面添加，带来的维护成本是巨大的。