动态路由改变面包屑title

在Vue和Element UI的后台管理系统中，通常使用面包屑来指示当前所处的页面。一般情况下，我们会使用路由信息中的meta.title作为面包屑的标题。但是当遇到编辑和新增公用同一个页面的情况时，我们需要动态修改标题。有一种方法是在路由守卫中判断是否有id，来动态修改meta中的title。但是这种方法不太好，因为其他人在维护代码时可能不知道这样的设置，导致可维护性较差。另外，还需要让显示面包屑的组件支持动态修改meta.title，比较麻烦。

解决这个问题的一个巧妙方法是通过配置两个路由，指向同一个页面。如下所示：

{ 
  path: 'save', 
  name: 'teamCreate', 
  meta: { 
    title: '新增成员', 
    hideInMenu: true 
  }, 
  component: () => import('@/views/team/save.vue') 
},
{ 
  path: 'save/:id', 
  name: 'teamEdit', 
  meta: { 
    title: '编辑成员', 
    hideInMenu: true 
  }, 
  component: () => import('@/views/team/save.vue') 
}

通过这种方式，我们可以在不同的路由中设置不同的meta.title，从而实现动态修改面包屑的标题。

另外，如果需要在客户列表点击跳转至客户的订单页面，并以被点击客户的信息直接查询，但希望面包屑的标题与普通打开订单页面的标题保持一致，可以使用类似的方法。在order/index.vue中可以通过this.$route.params.customerName来获取被点击客户的信息，并设置面包屑的标题。但是需要注意的是，导航栏的结果可能要在下一次打开同一个页面才会渲染出来。