【项目实战经验】vue的动态路由实现对应面包屑动态值显示

        一开始我想的思路就有问题，总想着用动态的路由对应唯一面包屑，这是不对的，应该用动态的路由，对应动态的面包屑，只要相互有对应的动态值就可了。以我自己做的一个地图下钻到列表为例，

         需求:再点击一个地图时，进入对应省的列表，并且面包屑显示某某省的什么。

所以废话不多说，开始干

        先是使用地图。这个步骤我就忽略了，因为我有一篇这个文章     使用第三方地图   点击这个就可以到我下一个文章了。

    现在地图有了，就是对应的路由了，我是这样处理的。

      

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

后面的id就是可以监听到对应的动态值，在点击跳转的时候这样写

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

后面拼的值就是对应后面要显示的动态路由，接下来最关键的一步，就是处理这个面包屑

   我们是有一个面包屑组件，直接监听当前的路由

  $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});
      },

  这样就可以每次压入的面包屑都是对应的名字，而且每一次都是新的面包屑。

   这样就实现这个需求了，动态的路由，对应动态的面包屑。

分享项目经验不容易，抬起你发财的小手，给个动力，点赞，评论，转发，关注，谢谢了。