Vue动态路由面包屑导航栏（一键复制看效果）

先看效果：

---

说明：

   一般我们肯定是直接从饿了么搬过来组件直接用，但是那样是写死的，并不适用于一般开发，也不灵活，而且也无法删除导航页面。所以自己封装一个动态的，然后根据路由地址去增加或者删除面包屑导航页面。具体往下看 

---

我注释掉红色部分的代码大家也都见过，是element里面的组件，但是这样是写死的，例如我里面写的某一行 :to="{ path: '/ac/index' }" 管理首页  其中path路径和管理首页这两个都是写死的；实际开发中这样写的话会显得你很没水平。。 （继续往下看：）

<el-breadcrumb-item :to="{ path: '/ac/index' }">管理首页</el-breadcrumb-item> 

---

动态生成： 

<el-breadcrumb separator="/">
            <template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.path">
                <el-breadcrumb-item :to="{ path: breadcrumb.path }">
                    {{ breadcrumb.name }}
                    <i class="el-icon-close" @click.stop.prevent="removeBreadcrumb(index)"
                        style="margin-left: 8px; cursor: pointer;">x
                    </i>
                </el-breadcrumb-item>
            </template>
</el-breadcrumb>

<script>
export default {
    name: 'BreadcrumbComponent',
    data() {
        return {
            breadcrumbs: [
                { name: '管理首页', path: '/ac/index' }
            ]
        };
    },
    watch: {
        // 监听路由变化 -----------》更新面包屑
        $route(to) {
            this.updateBreadcrumbs(to);
        },
    },
    methods: {
        updateBreadcrumbs(route) {
            console.log(route, '路由')
            const { name, path } = route;
            if (!this.breadcrumbs.find(b => b.path === path)) {
                this.breadcrumbs.push({ name, path });
            }
        },
        removeBreadcrumb(index) {
            this.breadcrumbs.splice(index, 1);
        },
    },
    mounted() {
    },
};
</script>

<style scoped lang="scss">
.el-icon-close {
    font-size: 12px;
    color: #909399;
}

.el-icon-close:hover {
    color: #0960bd;
}
</style>

描述：

breadcrumbs: [
                { name: '管理首页', path: '/ac/index' }
            ]

这里初始化默认肯定需要显示一个面包屑页面导航的

就比如说这个

---

好了，大概就是这么多内容，其实还有别的更高级的动态面包屑，Vuex之类的，全局状态管理去写。只不过开发时间紧，没来得及搞，有空了的话专门多写几种方法小demo，需要用的时候直接c。大家可以关注我，后续我发出来文章分享给大家！！！