动态路由

Fixiaobai

2023-08-28 6cc81f9de0c87c40a9f1181ab35e8dff792a1884

 src/components/Breadcrumb/index.vue

@@ -1,5 +1,7 @@
<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
<div style="display: flex;justify-content: space-around;">
  <el-col :span="12" style="background-color: #fff;">
    <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
@@ -7,6 +9,13 @@
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
  </el-col>
  <el-col :span="12" style="background-color: #fff;display: flex;justify-content: end; align-items: center;">
    <!-- <el-button v-if="backPlan" type="primary" icon="el-icon-refresh-left" size="mini" plain @click="backPlanUp">返回</el-button> -->
    <!-- <el-button v-if="add" size="mini" @click="breadd" style="width: 60px;" type="primary">保存</el-button> -->
  <el-col :span="1"></el-col>
  </el-col>
</div>
</template>

<script>
@@ -15,7 +24,9 @@
export default {
  data() {
    return {
      levelList: null
      levelList: null,
      backPlan: false,
      add: false
    }
  },
  watch: {
@@ -27,6 +38,20 @@
    this.getBreadcrumb()
  },
  methods: {
    backPlanUp(){
        this.$parent.combackPlan()
        this.backPlan=false
    },
    breadd(){
        this.add=false
        this.$parent.indexAdd()
    },
    showadd(){
      this.add=true
    },
    triggerBtnPlan(){
      this.backPlan?this.backPlan=false:this.backPlan=true
    },
    getBreadcrumb() {
      // only show routes with meta.title
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)