需求:放上去出來"小手"可进行点击跳转到对应页面
<template> <el-breadcrumb separator-class="el-icon-arrow-right"> <!-- <el-breadcrumb-item :to="{ path: '/index/userManage/list' }">首页</el-breadcrumb-item> --> <el-breadcrumb-item v-show="index != 0" v-for="(item, index) in breadList" :key="index"> <span @click="jump(item)">{{ item.meta.title }}</span> </el-breadcrumb-item> </el-breadcrumb></template><script> export default { data() { return { breadList: [], }; }, created() { this.getBreadList(); }, watch: { $route: 'getBreadList', }, methods: { getBreadList() { this.breadList = this.$route.matched; }, // 跳转 jump(item) { this.$router.push({ path: item.path }); }, }, };</script><style scoped> .el-breadcrumb { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); font-size: 16px; font-weight: bold; height: 50px; line-height: 50px; padding-left: 15px; background-color: #fff; margin-bottom: 20px; cursor: pointer; }</style>