技術標籤：vuevuemeta

先上效果圖：

程式碼：路由部分

[{
   path: "userokr",              
   component: () =>import("@/views/user/UserOkr.vue"),
   meta: {
   title:"我的OKR"
    }
   },
   {
   path: "teamokr",
   component: () => import("@/views/team/TeamOkr.vue"),
   meta:
 
 {
   title:"團隊OKR",
   module:"團隊OKR"
  },
   {
    path: "teammateokr",
    component: () => import("@/views/team/TeammateOkr.vue"),
    meta: {
    title:"團隊成員OKR",
    module:"團隊OKR"
     }
  },

lay-out頭部

<a-layout-header style="background: #fff; padding: 0 "
 
>
	<a-icon
	class="trigger"
    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
     @click="() => (collapsed = !collapsed)"
     />
     /**麵包屑*/
     <template>             
       <a-breadcrumb-item v-if="$route.meta.module">
           <
 
a href>{{$route.meta.module}}</a>
       </a-breadcrumb-item>
       <a-breadcrumb-item>{{$route.meta.title}}
       </a-breadcrumb-item>
     </template>                     
        </a-layout-header>

具體可看官網API進行自定義：比如使用 Breadcrumb.Separator 可以自定義分隔符。