面包屑导航

163 阅读1分钟

 需求:放上去出來"小手"可进行点击跳转到对应页面

<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>