Processing method of bread crumbs from list page to detail page of vue

this.$route.matched is used for menu level breadcrumbs

If data structure

[
    {       
        path: "/home",
        name: "Business Statistics",
        component: "Home",
        children:[{         
          path: "/commercial/dataAccount/Day",
          name: "Daily statistics 1",
          component: "DataAccountDay"
        },
        {         
          path: "/commercial/dataAccount/Month",
          name: "Monthly statistics 1",
          component: "DataAccountMonth"
        }]
      },
      {       
        path: "/home",
        name: "Business Report Center",
        component: "Home",
        children:[{         
          path: "/commercial/baobiao/Day",
          name: "Daily report 1",
          component: "BaobiaoDay"
        }]
      } 
    ]

In the DataAccountDay component is a list. Click the list to enter the detail.vue page

What to do if you want to achieve the following effect (click each record in the table, and the name will be displayed after the crumbs)

breadcrumb.vue, the original breadcrumb component

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

If the bread crumbs of other components are changed synchronously, the data of bread crumbs should be put into vuex for data sharing

breadcrumb.vue is modified to

<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      
      // We don't need a lot of data in matched. If the data key value pairs added later are inconsistent, it will lead to errors
      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>

Button for DataAccountDay.vue

<el-button  @ click = " goDetail ( scope . row ) " > details </el-button>
    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)
    },

Click from the list to enter the details page route configuration

  {
    path: '/home', 
    name: "Industrial data statistics",
    component:Home,
    children:[{
      path:"/industry/dataAccount/Day/:userId",//userId cannot be the same name as other dynamic routes, otherwise an error will be reported
      name:"Daily statistics",
      component:() => import("../views/dataAccount/detail.vue")
    }]
   
  }

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");
     // Be sure to use this.$nextTick or you will not get the userID 
     this.$nextTick(() => {
        let userID = this.$route.params.userId;        
        let name = this.$store.state.mapTitle[userID]
        this.$store.commit("addBreadList", { name: name });       
      });
  },

};
</script>

store.js

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

technological process

1. Click the list page to save the breadcrumbs obtained through this.$route.matched, and at the same time, save an object composed of the clicked id and name into vuex

2. Enter the details page to get the name value through this.$route.params.userId and add it to the bread crumb object of vuex. Then the bread crumbs are updated

Tags: Front-end Vue JSON

Posted on Sun, 17 May 2020 13:04:34 -0400 by surreal5335