vue从列表页到详情页的面包屑处理方法

[
    {       
        path: "/home",
        name: "商业数据统计",
        component: "Home",
        children:[{         
          path: "/commercial/dataAccount/Day",
          name: "日统计1",
          component: "DataAccountDay"
        },
        {         
          path: "/commercial/dataAccount/Month",
          name: "月统计1",
          component: "DataAccountMonth"
        }]
      },
      {       
        path: "/home",
        name: "商业报表中心",
        component: "Home",
        children:[{         
          path: "/commercial/baobiao/Day",
          name: "日报表1",
          component: "BaobiaoDay"
        }]
      } 
    ]

<template>
  <div class="margin_b20">
     <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item  v-for="(item,index) in breadList" :key="index">
           {{item.name}}
         </el-breadcrumb-item>
     </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name:"Breadcrumb",  
  data(){
    return{
      breadList:[]
    }
  },
  created(){
    this.getBreadList()
  },
  watch:{
    $route(){
      this.getBreadList()
    }
  },
  methods:{
    getBreadList(){
      let matched = this.$route.matched;      
      this.breadList = matched
      console.log(this.breadList)
    }
  }  
};
</script>

<style>

</style>

<template>
  <div class="margin_b20">   
      <el-breadcrumb-item v-for="(item,key) in breadlist" :key="key">{{item.name}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
  name: "Breadcrumb",
  data() {
    return {
      //breadlist: []
    };
  },
  computed:{
    breadlist(){
      return this.$store.state.breadlist
    }
  },
  watch:{
   $route(){   
     this.getBreadcrumb()
   }
  },
  created() {
     console.log("getBreadcrumb")
     this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb(){
      let matched = this.$route.matched      
      // matched 里面的很多数据我们并不需要，放进去如果后面增加的数据键值对不一致会导致错误
      matched = matched.map((item)=>{
        return {name:item.name}
      })
      console.log(matched)
      this.$store.commit("saveBreadList",matched)
    }
  }
};
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

.main-footer {
  border-top: 1px solid #ccc;
  background: #f8fafd;
  padding: 10px;
  margin-left: 0;
}
.main-footer img {
  vertical-align: middle;
  width: 65px;
  margin-right: 10px;
}
</style>

    goDetail(row){       
       this.$router.push({path:`/industry/dataAccount/Day/${row.id}`})
       let obj={[row.id]:row.name}
       console.log(obj)
       this.$store.commit("saveMapTitle",obj)
    },

  {
    path: '/home', 
    name: "工业数据统计",
    component:Home,
    children:[{
      path:"/industry/dataAccount/Day/:userId",//userId不能与其他的动态路由重名 否则会报错
      name:"日统计",
      component:() => import("../views/dataAccount/detail.vue")
    }]
   
  }

<template>
  <div>this is detail {{$route.params.userId}}</div>
</template>

<script>
export default {
  data() {
    return {
      table1: {       
        tableData: []
      }
    };
  },
  created() {
   
  },
  computed: {

  }
  },
  watch: {
    
  },
  mounted() {
    console.log("mounted");
     // 一定要使用 this.$nextTick 否则获取不到userID 
     this.$nextTick(() => {
        let userID = this.$route.params.userId;        
        let name = this.$store.state.mapTitle[userID]
        this.$store.commit("addBreadList", { name: name });       
      });
  },

};
</script>

  state: {
    mapTitle:JSON.parse(sessionStorage.getItem("mapTitle")) || {},    
    breadlist:[],   
  },

  mutations: {
    saveMapTitle(state,mapTitle){     
     state.mapTitle = mapTitle    
     sessionStorage.setItem("mapTitle",JSON.stringify(mapTitle))
    },
    addBreadList(state,newbreadlist){      
     state.breadlist.push(newbreadlist)
    },
    saveBreadList(state,breadlist){
      state.breadlist = breadlist
    }
}