[Project actual combat experience] Vue's dynamic routing realizes the corresponding dynamic value display of breadcrumbs

        At the beginning, I had a problem with my thinking. I always wanted to use dynamic routing to correspond to unique breadcrumbs. This is wrong. Dynamic routing should be used to correspond to dynamic breadcrumbs, as long as there are corresponding dynamic values. Take a map drill-down list I made myself as an example,

         Requirements: When you click on a map again, you will enter the list of corresponding provinces, and the breadcrumbs will show what is in a certain province.

So without further ado, let's get to work

        First use the map. I ignored this step, because I have an article      using a third-party map.    Click this to go to my next article.

    Now that the map is available, it is the corresponding route. This is how I handle it.

      

 {
    path: '/admin/TransactionDetails/:id',
    name: 'TransactionDetails',
    meta: {
      tabname: '异动情况详情', keepalive: false,
      breadcrumb: '异动情况详情'
    },
    component: TransactionDetails
  },

The following id is the corresponding dynamic value that can be monitored, write like this when clicking to jump

this.$router.push({
        path: `/admin/TransactionDetails/${param.name}`,
        query: { param: param.name }
      });

The value spelled later corresponds to the dynamic route to be displayed later, and the next most critical step is to process the breadcrumbs

   We have a breadcrumb component that directly listens to the current route

  $route(next, prev){
        if(next.path.indexOf("/admin/TransactionDetails/")!=-1){
          next.meta.tabname =next.query.param+"异动情况详情"
         
        }
        
        let {path, meta, query, params} = next;
        this.pushTopTab({tabname: meta.tabname, path, query, params});
      },

  In this way, the breadcrumbs pressed in each time are the corresponding names, and each time is a new breadcrumb.

   In this way, this requirement is realized, dynamic routing corresponds to dynamic breadcrumbs.

It is not easy to share project experience, raise your little hand to make a fortune, give motivation, like, comment, repost, follow, thank you.