import{_ as i,a as C,q as A,k as r,l as d,w as t,j as e,f as p,e as a,b as n,d as W,r as Z,t as I}from"./index.3fe853a6.js";import{H as Y}from"./HomeOutlined.64d10447.js";import{U as w}from"./UserOutlined.f1d89c6a.js";const G={pageData:{title:"Breadcrumb",description:"",frontmatter:{category:"Components",type:"Navigation",title:"Breadcrumb",cover:"https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg"},headers:[{level:2,title:"When To Use",slug:"When-To-Use",content:""},{level:2,title:"API",slug:"API",content:""},{level:3,title:"Breadcrumb.Item",slug:"Breadcrumb-Item",content:""},{level:3,title:"Breadcrumb.Separator 1.5.0",slug:"Breadcrumb-Separator-1-5-0",content:""},{level:3,title:"routes",slug:"routes",content:""},{level:3,title:"Use with browserHistory",slug:"Use-with-browserHistory",content:"The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link."}],relativePath:"components/breadcrumb/index.en-US.md",content:` A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy. ## When To Use - When the system has more than two layers in a hierarchy. - When you need to inform the user of where they are. - When the user may need to navigate back to a higher level. ## API | Property | Description | Type | Optional | Default | Version | | --- | --- | --- | --- | --- | --- | | itemRender | Custom item renderer, #itemRender="{route, params, routes, paths}" | ({route, params, routes, paths}) => vNode | | - | | | params | Routing parameters | object | | - | | | routes | The routing stack information of router | [routes\\[\\]](#routes) | | - | | | separator | Custom separator | string\\|slot | | \`/\` | | ### Breadcrumb.Item | Property | Description | Type | Default | Version | | -------- | ------------------- | -------------------------------------- | ------- | ------- | | href | Target of hyperlink | string | - | | | overlay | The dropdown menu | [Menu](/components/menu) \\| () => Menu | - | | #### Events | Events Name | Description | Arguments | Version | | | ----------- | ----------------------------- | -------------------- | ------- | ----- | | click | handler to handle click event | (e:MouseEvent)=>void | - | 1.5.0 | ### Breadcrumb.Separator \`1.5.0\` | Property | Description | Type | Default | Version | | -------- | ----------- | ---- | ------- | ------- | | - | - | - | - | - | > When using \`Breadcrumb.Separator\`,its parent component must be set to \`separator=""\`, otherwise the default separator of the parent component will appear. ### routes \`\`\`ts interface Route { path: string; breadcrumbName: string; children?: Array<{ path: string; breadcrumbName: string; }>; } \`\`\` ### Use with browserHistory The link of Breadcrumb item targets \`#\` by default, you can use \`itemRender\` to make a \`browserHistory\` Link. \`\`\`html <template> <a-breadcrumb :routes="routes"> <template #itemRender="{ route, params, routes, paths }"> <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span> <router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link> </template> </a-breadcrumb> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; interface Route { path: string; breadcrumbName: string; children?: Array<{ path: string; breadcrumbName: string; }>; } export default defineComponent({ setup() { const routes = ref<Route[]>([ { path: 'index', breadcrumbName: 'home', }, { path: 'first', breadcrumbName: 'first', children: [ { path: '/general', breadcrumbName: 'General', }, { path: '/layout', breadcrumbName: 'Layout', }, { path: '/navigation', breadcrumbName: 'Navigation', }, ], }, { path: 'second', breadcrumbName: 'second', }, ]); return { routes, }; }, }); </script> \`\`\` `,html:`

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

When To Use

API

Property Description Type Optional Default Version
itemRender Custom item renderer, #itemRender="{route, params, routes, paths}" ({route, params, routes, paths}) => vNode -
params Routing parameters object -
routes The routing stack information of router routes[] -
separator Custom separator string|slot /
Property Description Type Default Version
href Target of hyperlink string -
overlay The dropdown menu Menu | () => Menu -

Events

Events Name Description Arguments Version
click handler to handle click event (e:MouseEvent)=>void - 1.5.0
Property Description Type Default Version
- - - - -

When using Breadcrumb.Separator,its parent component must be set to separator="", otherwise the default separator of the parent component will appear.

routes 

interface Route {
  path: string;
  breadcrumbName: string;
  children?: Array<{
    path: string;
    breadcrumbName: string;
  }>;
}

Use with browserHistory

The link of Breadcrumb item targets # by default, you can use itemRender to make a browserHistory Link.

<template>
  <a-breadcrumb :routes="routes">
    <template #itemRender="{ route, params, routes, paths }">
      <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
      <router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link>
    </template>
  </a-breadcrumb>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  interface Route {
    path: string;
    breadcrumbName: string;
    children?: Array<{
      path: string;
      breadcrumbName: string;
    }>;
  }
  export default defineComponent({
    setup() {
      const routes = ref<Route[]>([
        {
          path: 'index',
          breadcrumbName: 'home',
        },
        {
          path: 'first',
          breadcrumbName: 'first',
          children: [
            {
              path: '/general',
              breadcrumbName: 'General',
            },
            {
              path: '/layout',
              breadcrumbName: 'Layout',
            },
            {
              path: '/navigation',
              breadcrumbName: 'Navigation',
            },
          ],
        },
        {
          path: 'second',
          breadcrumbName: 'second',
        },
      ]);
      return {
        routes,
      };
    },
  });
</script>
`,lastUpdated:1748060300547}},V={class:"markdown"};function B(l,s,o,c,u,k){return r(),C("article",V,s[0]||(s[0]=[A(`

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

When To Use

API

PropertyDescriptionTypeOptionalDefaultVersion
itemRenderCustom item renderer, #itemRender="{route, params, routes, paths}"({route, params, routes, paths}) => vNode-
paramsRouting parametersobject-
routesThe routing stack information of routerroutes[]-
separatorCustom separatorstring|slot/
PropertyDescriptionTypeDefaultVersion
hrefTarget of hyperlinkstring-
overlayThe dropdown menuMenu | () => Menu-

Events

Events NameDescriptionArgumentsVersion
clickhandler to handle click event(e:MouseEvent)=>void-1.5.0
PropertyDescriptionTypeDefaultVersion
-----

When using Breadcrumb.Separator,its parent component must be set to separator="", otherwise the default separator of the parent component will appear.

routes 

interface Route {
  path: string;
  breadcrumbName: string;
  children?: Array<{
    path: string;
    breadcrumbName: string;
  }>;
}

Use with browserHistory

The link of Breadcrumb item targets # by default, you can use itemRender to make a browserHistory Link.

<template>
  <a-breadcrumb :routes="routes">
    <template #itemRender="{ route, params, routes, paths }">
      <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
      <router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link>
    </template>
  </a-breadcrumb>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  interface Route {
    path: string;
    breadcrumbName: string;
    children?: Array<{
      path: string;
      breadcrumbName: string;
    }>;
  }
  export default defineComponent({
    setup() {
      const routes = ref<Route[]>([
        {
          path: 'index',
          breadcrumbName: 'home',
        },
        {
          path: 'first',
          breadcrumbName: 'first',
          children: [
            {
              path: '/general',
              breadcrumbName: 'General',
            },
            {
              path: '/layout',
              breadcrumbName: 'Layout',
            },
            {
              path: '/navigation',
              breadcrumbName: 'Navigation',
            },
          ],
        },
        {
          path: 'second',
          breadcrumbName: 'second',
        },
      ]);
      return {
        routes,
      };
    },
  });
</script>
`,17)]))}const N=i(G,[["render",B]]),L={pageData:{title:"Breadcrumb",description:"",frontmatter:{category:"Components",subtitle:"\u9762\u5305\u5C51",type:"\u5BFC\u822A",title:"Breadcrumb",cover:"https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:""},{level:2,title:"API",slug:"API",content:""},{level:3,title:"Breadcrumb.Item",slug:"Breadcrumb-Item",content:""},{level:3,title:"Breadcrumb.Separator 1.5.0",slug:"Breadcrumb-Separator-1-5-0",content:""},{level:3,title:"routes",slug:"routes",content:""},{level:3,title:"\u548C browserHistory \u914D\u5408",slug:"\u548C-browserHistory-\u914D\u5408",content:"\u548C vue-router \u4E00\u8D77\u4F7F\u7528\u65F6\uFF0C\u9ED8\u8BA4\u751F\u6210\u7684 url \u8DEF\u5F84\u662F\u5E26\u6709 `#` \u7684\uFF0C\u5982\u679C\u548C browserHistory \u4E00\u8D77\u4F7F\u7528\u7684\u8BDD\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 `itemRender` \u5C5E\u6027\u5B9A\u4E49\u9762\u5305\u5C51\u94FE\u63A5\u3002"}],relativePath:"components/breadcrumb/index.zh-CN.md",content:` \u663E\u793A\u5F53\u524D\u9875\u9762\u5728\u7CFB\u7EDF\u5C42\u7EA7\u7ED3\u6784\u4E2D\u7684\u4F4D\u7F6E\uFF0C\u5E76\u80FD\u5411\u4E0A\u8FD4\u56DE\u3002 ## \u4F55\u65F6\u4F7F\u7528 - \u5F53\u7CFB\u7EDF\u62E5\u6709\u8D85\u8FC7\u4E24\u7EA7\u4EE5\u4E0A\u7684\u5C42\u7EA7\u7ED3\u6784\u65F6\uFF1B - \u5F53\u9700\u8981\u544A\u77E5\u7528\u6237\u300E\u4F60\u5728\u54EA\u91CC\u300F\u65F6\uFF1B - \u5F53\u9700\u8981\u5411\u4E0A\u5BFC\u822A\u7684\u529F\u80FD\u65F6\u3002 ## API | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u53EF\u9009\u503C | \u9ED8\u8BA4\u503C | | --- | --- | --- | --- | --- | | itemRender | \u81EA\u5B9A\u4E49\u94FE\u63A5\u51FD\u6570\uFF0C\u548C vue-router \u914D\u7F6E\u4F7F\u7528\uFF0C \u4E5F\u53EF\u4F7F\u7528 #itemRender="props" | ({route, params, routes, paths}) => vNode | | - | | params | \u8DEF\u7531\u7684\u53C2\u6570 | object | | - | | routes | router \u7684\u8DEF\u7531\u6808\u4FE1\u606F | [routes\\[\\]](#routes) | | - | | separator | \u5206\u9694\u7B26\u81EA\u5B9A\u4E49 | string\\|slot | | '/' | ### Breadcrumb.Item | \u53C2\u6570 | \u53C2\u6570 | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C | | ------- | -------------- | -------------------------------------- | ------ | ----- | | href | \u94FE\u63A5\u7684\u76EE\u7684\u5730 | string | - | 1.5.0 | | overlay | \u4E0B\u62C9\u83DC\u5355\u7684\u5185\u5BB9 | [Menu](/components/menu) \\| () => Menu | - | 1.5.0 | #### \u4E8B\u4EF6 | \u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 | \u7248\u672C | | | -------- | -------- | -------------------- | ---- | ----- | | click | \u5355\u51FB\u4E8B\u4EF6 | (e:MouseEvent)=>void | - | 1.5.0 | ### Breadcrumb.Separator \`1.5.0\` | \u53C2\u6570 | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C | | ---- | ---- | ------ | ---- | | - | - | - | - | > \u6CE8\u610F\uFF1A\u5728\u4F7F\u7528 \`Breadcrumb.Separator\` \u65F6\uFF0C\u5176\u7236\u7EC4\u4EF6\u7684\u5206\u9694\u7B26\u5FC5\u987B\u8BBE\u7F6E\u4E3A \`separator=""\`\uFF0C\u5426\u5219\u4F1A\u51FA\u73B0\u7236\u7EC4\u4EF6\u9ED8\u8BA4\u7684\u5206\u9694\u7B26\u3002 ### routes \`\`\`ts interface Route { path: string; breadcrumbName: string; children?: Array<{ path: string; breadcrumbName: string; }>; } \`\`\` ### \u548C browserHistory \u914D\u5408 \u548C vue-router \u4E00\u8D77\u4F7F\u7528\u65F6\uFF0C\u9ED8\u8BA4\u751F\u6210\u7684 url \u8DEF\u5F84\u662F\u5E26\u6709 \`#\` \u7684\uFF0C\u5982\u679C\u548C browserHistory \u4E00\u8D77\u4F7F\u7528\u7684\u8BDD\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 \`itemRender\` \u5C5E\u6027\u5B9A\u4E49\u9762\u5305\u5C51\u94FE\u63A5\u3002 \`\`\`html <template> <a-breadcrumb :routes="routes"> <template #itemRender="{ route, params, routes, paths }"> <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span> <router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link> </template> </a-breadcrumb> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; interface Route { path: string; breadcrumbName: string; children?: Array<{ path: string; breadcrumbName: string; }>; } export default defineComponent({ setup() { const routes = ref<Route[]>([ { path: 'index', breadcrumbName: 'home', }, { path: 'first', breadcrumbName: 'first', children: [ { path: '/general', breadcrumbName: 'General', }, { path: '/layout', breadcrumbName: 'Layout', }, { path: '/navigation', breadcrumbName: 'Navigation', }, ], }, { path: 'second', breadcrumbName: 'second', }, ]); return { routes, }; }, }); </script> \`\`\` `,html:`

\u663E\u793A\u5F53\u524D\u9875\u9762\u5728\u7CFB\u7EDF\u5C42\u7EA7\u7ED3\u6784\u4E2D\u7684\u4F4D\u7F6E\uFF0C\u5E76\u80FD\u5411\u4E0A\u8FD4\u56DE\u3002

\u4F55\u65F6\u4F7F\u7528

API

\u53C2\u6570 \u8BF4\u660E \u7C7B\u578B \u53EF\u9009\u503C \u9ED8\u8BA4\u503C
itemRender \u81EA\u5B9A\u4E49\u94FE\u63A5\u51FD\u6570\uFF0C\u548C vue-router \u914D\u7F6E\u4F7F\u7528\uFF0C \u4E5F\u53EF\u4F7F\u7528 #itemRender="props" ({route, params, routes, paths}) => vNode -
params \u8DEF\u7531\u7684\u53C2\u6570 object -
routes router \u7684\u8DEF\u7531\u6808\u4FE1\u606F routes[] -
separator \u5206\u9694\u7B26\u81EA\u5B9A\u4E49 string|slot '/'
\u53C2\u6570 \u53C2\u6570 \u7C7B\u578B \u9ED8\u8BA4\u503C \u7248\u672C
href \u94FE\u63A5\u7684\u76EE\u7684\u5730 string - 1.5.0
overlay \u4E0B\u62C9\u83DC\u5355\u7684\u5185\u5BB9 Menu | () => Menu - 1.5.0

\u4E8B\u4EF6

\u4E8B\u4EF6\u540D\u79F0 \u8BF4\u660E \u56DE\u8C03\u53C2\u6570 \u7248\u672C
click \u5355\u51FB\u4E8B\u4EF6 (e:MouseEvent)=>void - 1.5.0
\u53C2\u6570 \u7C7B\u578B \u9ED8\u8BA4\u503C \u7248\u672C
- - - -

\u6CE8\u610F\uFF1A\u5728\u4F7F\u7528 Breadcrumb.Separator \u65F6\uFF0C\u5176\u7236\u7EC4\u4EF6\u7684\u5206\u9694\u7B26\u5FC5\u987B\u8BBE\u7F6E\u4E3A separator=""\uFF0C\u5426\u5219\u4F1A\u51FA\u73B0\u7236\u7EC4\u4EF6\u9ED8\u8BA4\u7684\u5206\u9694\u7B26\u3002

routes 

interface Route {
  path: string;
  breadcrumbName: string;
  children?: Array<{
    path: string;
    breadcrumbName: string;
  }>;
}

\u548C browserHistory \u914D\u5408

\u548C vue-router \u4E00\u8D77\u4F7F\u7528\u65F6\uFF0C\u9ED8\u8BA4\u751F\u6210\u7684 url \u8DEF\u5F84\u662F\u5E26\u6709 # \u7684\uFF0C\u5982\u679C\u548C browserHistory \u4E00\u8D77\u4F7F\u7528\u7684\u8BDD\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 itemRender \u5C5E\u6027\u5B9A\u4E49\u9762\u5305\u5C51\u94FE\u63A5\u3002

<template>
  <a-breadcrumb :routes="routes">
    <template #itemRender="{ route, params, routes, paths }">
      <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
      <router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link>
    </template>
  </a-breadcrumb>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  interface Route {
    path: string;
    breadcrumbName: string;
    children?: Array<{
      path: string;
      breadcrumbName: string;
    }>;
  }
  export default defineComponent({
    setup() {
      const routes = ref<Route[]>([
        {
          path: 'index',
          breadcrumbName: 'home',
        },
        {
          path: 'first',
          breadcrumbName: 'first',
          children: [
            {
              path: '/general',
              breadcrumbName: 'General',
            },
            {
              path: '/layout',
              breadcrumbName: 'Layout',
            },
            {
              path: '/navigation',
              breadcrumbName: 'Navigation',
            },
          ],
        },
        {
          path: 'second',
          breadcrumbName: 'second',
        },
      ]);
      return {
        routes,
      };
    },
  });
</script>
`,lastUpdated:1748060300548}},J={class:"markdown"};function R(l,s,o,c,u,k){return r(),C("article",J,s[0]||(s[0]=[A(`

\u663E\u793A\u5F53\u524D\u9875\u9762\u5728\u7CFB\u7EDF\u5C42\u7EA7\u7ED3\u6784\u4E2D\u7684\u4F4D\u7F6E\uFF0C\u5E76\u80FD\u5411\u4E0A\u8FD4\u56DE\u3002

\u4F55\u65F6\u4F7F\u7528

API

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u53EF\u9009\u503C\u9ED8\u8BA4\u503C
itemRender\u81EA\u5B9A\u4E49\u94FE\u63A5\u51FD\u6570\uFF0C\u548C vue-router \u914D\u7F6E\u4F7F\u7528\uFF0C \u4E5F\u53EF\u4F7F\u7528 #itemRender="props"({route, params, routes, paths}) => vNode-
params\u8DEF\u7531\u7684\u53C2\u6570object-
routesrouter \u7684\u8DEF\u7531\u6808\u4FE1\u606Froutes[]-
separator\u5206\u9694\u7B26\u81EA\u5B9A\u4E49string|slot'/'
\u53C2\u6570\u53C2\u6570\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
href\u94FE\u63A5\u7684\u76EE\u7684\u5730string-1.5.0
overlay\u4E0B\u62C9\u83DC\u5355\u7684\u5185\u5BB9Menu | () => Menu-1.5.0

\u4E8B\u4EF6

\u4E8B\u4EF6\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570\u7248\u672C
click\u5355\u51FB\u4E8B\u4EF6(e:MouseEvent)=>void-1.5.0
\u53C2\u6570\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
----

\u6CE8\u610F\uFF1A\u5728\u4F7F\u7528 Breadcrumb.Separator \u65F6\uFF0C\u5176\u7236\u7EC4\u4EF6\u7684\u5206\u9694\u7B26\u5FC5\u987B\u8BBE\u7F6E\u4E3A separator=""\uFF0C\u5426\u5219\u4F1A\u51FA\u73B0\u7236\u7EC4\u4EF6\u9ED8\u8BA4\u7684\u5206\u9694\u7B26\u3002

routes 

interface Route {
  path: string;
  breadcrumbName: string;
  children?: Array<{
    path: string;
    breadcrumbName: string;
  }>;
}

\u548C browserHistory \u914D\u5408

\u548C vue-router \u4E00\u8D77\u4F7F\u7528\u65F6\uFF0C\u9ED8\u8BA4\u751F\u6210\u7684 url \u8DEF\u5F84\u662F\u5E26\u6709 # \u7684\uFF0C\u5982\u679C\u548C browserHistory \u4E00\u8D77\u4F7F\u7528\u7684\u8BDD\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 itemRender \u5C5E\u6027\u5B9A\u4E49\u9762\u5305\u5C51\u94FE\u63A5\u3002

<template>
  <a-breadcrumb :routes="routes">
    <template #itemRender="{ route, params, routes, paths }">
      <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
      <router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link>
    </template>
  </a-breadcrumb>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  interface Route {
    path: string;
    breadcrumbName: string;
    children?: Array<{
      path: string;
      breadcrumbName: string;
    }>;
  }
  export default defineComponent({
    setup() {
      const routes = ref<Route[]>([
        {
          path: 'index',
          breadcrumbName: 'home',
        },
        {
          path: 'first',
          breadcrumbName: 'first',
          children: [
            {
              path: '/general',
              breadcrumbName: 'General',
            },
            {
              path: '/layout',
              breadcrumbName: 'Layout',
            },
            {
              path: '/navigation',
              breadcrumbName: 'Navigation',
            },
          ],
        },
        {
          path: 'second',
          breadcrumbName: 'second',
        },
      ]);
      return {
        routes,
      };
    },
  });
</script>
`,17)]))}const P=i(L,[["render",R]]),S={};function X(l,s){const o=e("a-breadcrumb-item"),c=e("a-breadcrumb"),u=e("demo-box");return r(),d(u,{jsfiddle:{us:"The simplest use.",cn:"\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002",docHtml:`

zh-CN

\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002

en-US

The simplest use.

`,order:0,title:{"zh-CN":"\u57FA\u672C","en-US":"Basic Usage"},relativePath:"components/breadcrumb/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWI+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+SG9tZTwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+PGEgaHJlZj0iIj5BcHBsaWNhdGlvbiBDZW50ZXI8L2E+PC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT48YSBocmVmPSIiPkFwcGxpY2F0aW9uIExpc3Q8L2E+PC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5BbiBBcHBsaWNhdGlvbjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgPC9hLWJyZWFkY3J1bWI+CjwvdGVtcGxhdGU+CgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWI+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+SG9tZTwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+PGEgaHJlZj0iIj5BcHBsaWNhdGlvbiBDZW50ZXI8L2E+PC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT48YSBocmVmPSIiPkFwcGxpY2F0aW9uIExpc3Q8L2E+PC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5BbiBBcHBsaWNhdGlvbjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgPC9hLWJyZWFkY3J1bWI+CjwvdGVtcGxhdGU+"}},{default:t(()=>[p(c,null,{default:t(()=>[p(o,null,{default:t(()=>s[0]||(s[0]=[a("Home")])),_:1,__:[0]}),p(o,null,{default:t(()=>s[1]||(s[1]=[n("a",{href:""},"Application Center",-1)])),_:1,__:[1]}),p(o,null,{default:t(()=>s[2]||(s[2]=[n("a",{href:""},"Application List",-1)])),_:1,__:[2]}),p(o,null,{default:t(()=>s[3]||(s[3]=[a("An Application")])),_:1,__:[3]})]),_:1})]),htmlCode:t(()=>s[4]||(s[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Home"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("An Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:t(()=>s[5]||(s[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Home"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("An Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}const j=i(S,[["render",X]]),_={};function q(l,s){const o=e("a-breadcrumb-item"),c=e("a-menu-item"),u=e("a-menu"),k=e("a-breadcrumb"),g=e("demo-box");return r(),d(g,{jsfiddle:{us:"Breadcrumbs support drop down menu.",cn:"\u9762\u5305\u5C51\u652F\u6301\u4E0B\u62C9\u83DC\u5355\u3002",docHtml:`

zh-CN

\u9762\u5305\u5C51\u652F\u6301\u4E0B\u62C9\u83DC\u5355\u3002

en-US

Breadcrumbs support drop down menu.

`,order:5,title:{"zh-CN":"\u5E26\u4E0B\u62C9\u83DC\u5355\u7684\u9762\u5305\u5C51","en-US":"Bread crumbs with drop down menu"},relativePath:"components/breadcrumb/demo/overlay.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWI+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+QW50IERlc2lnbiBWdWU8L2EtYnJlYWRjcnVtYi1pdGVtPgogICAgPGEtYnJlYWRjcnVtYi1pdGVtPjxhIGhyZWY9IiI+Q29tcG9uZW50PC9hPjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+CiAgICAgIDxhIGhyZWY9IiI+R2VuZXJhbDwvYT4KICAgICAgPHRlbXBsYXRlICNvdmVybGF5PgogICAgICAgIDxhLW1lbnU+CiAgICAgICAgICA8YS1tZW51LWl0ZW0+CiAgICAgICAgICAgIDxhIHRhcmdldD0iX2JsYW5rIiByZWw9Im5vb3BlbmVyIG5vcmVmZXJyZXIiIGhyZWY9Imh0dHA6Ly93d3cuYWxpcGF5LmNvbS8iPkdlbmVyYWw8L2E+CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtPgogICAgICAgICAgICA8YSB0YXJnZXQ9Il9ibGFuayIgcmVsPSJub29wZW5lciBub3JlZmVycmVyIiBocmVmPSJodHRwOi8vd3d3LnRhb2Jhby5jb20vIj5MYXlvdXQ8L2E+CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtPgogICAgICAgICAgICA8YSB0YXJnZXQ9Il9ibGFuayIgcmVsPSJub29wZW5lciBub3JlZmVycmVyIiBocmVmPSJodHRwOi8vd3d3LnRtYWxsLmNvbS8iPk5hdmlnYXRpb248L2E+CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1tZW51PgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5CdXR0b248L2EtYnJlYWRjcnVtYi1pdGVtPgogIDwvYS1icmVhZGNydW1iPgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWI+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+QW50IERlc2lnbiBWdWU8L2EtYnJlYWRjcnVtYi1pdGVtPgogICAgPGEtYnJlYWRjcnVtYi1pdGVtPjxhIGhyZWY9IiI+Q29tcG9uZW50PC9hPjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+CiAgICAgIDxhIGhyZWY9IiI+R2VuZXJhbDwvYT4KICAgICAgPHRlbXBsYXRlICNvdmVybGF5PgogICAgICAgIDxhLW1lbnU+CiAgICAgICAgICA8YS1tZW51LWl0ZW0+CiAgICAgICAgICAgIDxhIHRhcmdldD0iX2JsYW5rIiByZWw9Im5vb3BlbmVyIG5vcmVmZXJyZXIiIGhyZWY9Imh0dHA6Ly93d3cuYWxpcGF5LmNvbS8iPkdlbmVyYWw8L2E+CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtPgogICAgICAgICAgICA8YSB0YXJnZXQ9Il9ibGFuayIgcmVsPSJub29wZW5lciBub3JlZmVycmVyIiBocmVmPSJodHRwOi8vd3d3LnRhb2Jhby5jb20vIj5MYXlvdXQ8L2E+CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtPgogICAgICAgICAgICA8YSB0YXJnZXQ9Il9ibGFuayIgcmVsPSJub29wZW5lciBub3JlZmVycmVyIiBocmVmPSJodHRwOi8vd3d3LnRtYWxsLmNvbS8iPk5hdmlnYXRpb248L2E+CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1tZW51PgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5CdXR0b248L2EtYnJlYWRjcnVtYi1pdGVtPgogIDwvYS1icmVhZGNydW1iPgo8L3RlbXBsYXRlPg=="}},{default:t(()=>[p(k,null,{default:t(()=>[p(o,null,{default:t(()=>s[0]||(s[0]=[a("Ant Design Vue")])),_:1,__:[0]}),p(o,null,{default:t(()=>s[1]||(s[1]=[n("a",{href:""},"Component",-1)])),_:1,__:[1]}),p(o,null,{overlay:t(()=>[p(u,null,{default:t(()=>[p(c,null,{default:t(()=>s[2]||(s[2]=[n("a",{target:"_blank",rel:"noopener noreferrer",href:"http://www.alipay.com/"},"General",-1)])),_:1,__:[2]}),p(c,null,{default:t(()=>s[3]||(s[3]=[n("a",{target:"_blank",rel:"noopener noreferrer",href:"http://www.taobao.com/"},"Layout",-1)])),_:1,__:[3]}),p(c,null,{default:t(()=>s[4]||(s[4]=[n("a",{target:"_blank",rel:"noopener noreferrer",href:"http://www.tmall.com/"},"Navigation",-1)])),_:1,__:[4]})]),_:1})]),default:t(()=>[s[5]||(s[5]=n("a",{href:""},"General",-1))]),_:1,__:[5]}),p(o,null,{default:t(()=>s[6]||(s[6]=[a("Button")])),_:1,__:[6]})]),_:1})]),htmlCode:t(()=>s[7]||(s[7]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Ant Design Vue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Component"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("General"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#overlay"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-menu")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-menu-item")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("_blank"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("http://www.alipay.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("General"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-menu-item")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("_blank"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("http://www.taobao.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Layout"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-menu-item")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("_blank"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("http://www.tmall.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Navigation"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Button"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:t(()=>s[8]||(s[8]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Ant Design Vue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Component"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("General"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#overlay"),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-menu")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-menu-item")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("_blank"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("http://www.alipay.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("General"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-menu-item")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("_blank"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("http://www.taobao.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Layout"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-menu-item")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("_blank"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("http://www.tmall.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Navigation"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Button"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}const H=i(_,[["render",q]]),x=W({setup(){return{basePath:"/components/breadcrumb",routes:Z([{path:"index",breadcrumbName:"home"},{path:"first",breadcrumbName:"first",children:[{path:"/general",breadcrumbName:"General"},{path:"/layout",breadcrumbName:"Layout"},{path:"/navigation",breadcrumbName:"Navigation"}]},{path:"second",breadcrumbName:"second"}])}}}),F={key:0};function D(l,s,o,c,u,k){const g=e("router-link"),m=e("a-breadcrumb"),h=e("demo-box");return r(),d(h,{jsfiddle:{us:"Used together with `vue-router`",cn:"\u548C `vue-router` \u8FDB\u884C\u7ED3\u5408\u4F7F\u7528\u3002",docHtml:`

zh-CN

\u548C vue-router \u8FDB\u884C\u7ED3\u5408\u4F7F\u7528\u3002

en-US

Used together with vue-router

`,order:3,iframe:200,reactRouter:"react-router-dom",title:{"zh-CN":"\u5176\u5B83\u8DEF\u7531","en-US":"Other Router Integration"},relativePath:"components/breadcrumb/demo/router.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1icmVhZGNydW1iIDpyb3V0ZXM9InJvdXRlcyI+CiAgICAgIDx0ZW1wbGF0ZSAjaXRlbVJlbmRlcj0ieyByb3V0ZSwgcGF0aHMgfSI+CiAgICAgICAgPHNwYW4gdi1pZj0icm91dGVzLmluZGV4T2Yocm91dGUpID09PSByb3V0ZXMubGVuZ3RoIC0gMSI+CiAgICAgICAgICB7eyByb3V0ZS5icmVhZGNydW1iTmFtZSB9fQogICAgICAgIDwvc3Bhbj4KICAgICAgICA8cm91dGVyLWxpbmsgdi1lbHNlIDp0bz0iYCR7YmFzZVBhdGh9LyR7cGF0aHMuam9pbignLycpfWAiPgogICAgICAgICAge3sgcm91dGUuYnJlYWRjcnVtYk5hbWUgfX0KICAgICAgICA8L3JvdXRlci1saW5rPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLWJyZWFkY3J1bWI+CiAgICA8YnIgLz4KICAgIHt7ICRyb3V0ZS5wYXRoIH19CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmludGVyZmFjZSBSb3V0ZSB7CiAgcGF0aDogc3RyaW5nOwogIGJyZWFkY3J1bWJOYW1lOiBzdHJpbmc7CiAgY2hpbGRyZW4/OiBBcnJheTx7CiAgICBwYXRoOiBzdHJpbmc7CiAgICBicmVhZGNydW1iTmFtZTogc3RyaW5nOwogIH0+Owp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCByb3V0ZXMgPSByZWY8Um91dGVbXT4oWwogICAgICB7CiAgICAgICAgcGF0aDogJ2luZGV4JywKICAgICAgICBicmVhZGNydW1iTmFtZTogJ2hvbWUnLAogICAgICB9LAogICAgICB7CiAgICAgICAgcGF0aDogJ2ZpcnN0JywKICAgICAgICBicmVhZGNydW1iTmFtZTogJ2ZpcnN0JywKICAgICAgICBjaGlsZHJlbjogWwogICAgICAgICAgewogICAgICAgICAgICBwYXRoOiAnL2dlbmVyYWwnLAogICAgICAgICAgICBicmVhZGNydW1iTmFtZTogJ0dlbmVyYWwnLAogICAgICAgICAgfSwKICAgICAgICAgIHsKICAgICAgICAgICAgcGF0aDogJy9sYXlvdXQnLAogICAgICAgICAgICBicmVhZGNydW1iTmFtZTogJ0xheW91dCcsCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICBwYXRoOiAnL25hdmlnYXRpb24nLAogICAgICAgICAgICBicmVhZGNydW1iTmFtZTogJ05hdmlnYXRpb24nLAogICAgICAgICAgfSwKICAgICAgICBdLAogICAgICB9LAogICAgICB7CiAgICAgICAgcGF0aDogJ3NlY29uZCcsCiAgICAgICAgYnJlYWRjcnVtYk5hbWU6ICdzZWNvbmQnLAogICAgICB9LAogICAgXSk7CiAgICByZXR1cm4gewogICAgICBiYXNlUGF0aDogJy9jb21wb25lbnRzL2JyZWFkY3J1bWInLAogICAgICByb3V0ZXMsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1icmVhZGNydW1iIDpyb3V0ZXM9InJvdXRlcyI+CiAgICAgIDx0ZW1wbGF0ZSAjaXRlbVJlbmRlcj0ieyByb3V0ZSwgcGF0aHMgfSI+CiAgICAgICAgPHNwYW4gdi1pZj0icm91dGVzLmluZGV4T2Yocm91dGUpID09PSByb3V0ZXMubGVuZ3RoIC0gMSI+CiAgICAgICAgICB7eyByb3V0ZS5icmVhZGNydW1iTmFtZSB9fQogICAgICAgIDwvc3Bhbj4KICAgICAgICA8cm91dGVyLWxpbmsgdi1lbHNlIDp0bz0iYCR7YmFzZVBhdGh9LyR7cGF0aHMuam9pbignLycpfWAiPgogICAgICAgICAge3sgcm91dGUuYnJlYWRjcnVtYk5hbWUgfX0KICAgICAgICA8L3JvdXRlci1saW5rPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLWJyZWFkY3J1bWI+CiAgICA8YnIgLz4KICAgIHt7ICRyb3V0ZS5wYXRoIH19CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHJvdXRlcyA9IHJlZihbewogICAgICBwYXRoOiAnaW5kZXgnLAogICAgICBicmVhZGNydW1iTmFtZTogJ2hvbWUnLAogICAgfSwgewogICAgICBwYXRoOiAnZmlyc3QnLAogICAgICBicmVhZGNydW1iTmFtZTogJ2ZpcnN0JywKICAgICAgY2hpbGRyZW46IFt7CiAgICAgICAgcGF0aDogJy9nZW5lcmFsJywKICAgICAgICBicmVhZGNydW1iTmFtZTogJ0dlbmVyYWwnLAogICAgICB9LCB7CiAgICAgICAgcGF0aDogJy9sYXlvdXQnLAogICAgICAgIGJyZWFkY3J1bWJOYW1lOiAnTGF5b3V0JywKICAgICAgfSwgewogICAgICAgIHBhdGg6ICcvbmF2aWdhdGlvbicsCiAgICAgICAgYnJlYWRjcnVtYk5hbWU6ICdOYXZpZ2F0aW9uJywKICAgICAgfV0sCiAgICB9LCB7CiAgICAgIHBhdGg6ICdzZWNvbmQnLAogICAgICBicmVhZGNydW1iTmFtZTogJ3NlY29uZCcsCiAgICB9XSk7CiAgICByZXR1cm4gewogICAgICBiYXNlUGF0aDogJy9jb21wb25lbnRzL2JyZWFkY3J1bWInLAogICAgICByb3V0ZXMsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:t(()=>[n("div",null,[p(m,{routes:l.routes},{itemRender:t(({route:b,paths:y})=>[l.routes.indexOf(b)===l.routes.length-1?(r(),C("span",F,I(b.breadcrumbName),1)):(r(),d(g,{key:1,to:`${l.basePath}/${y.join("/")}`},{default:t(()=>[a(I(b.breadcrumbName),1)]),_:2},1032,["to"]))]),_:1},8,["routes"]),s[0]||(s[0]=n("br",null,null,-1)),a(" "+I(l.$route.path),1)])]),htmlCode:t(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),a(),n("span",{class:"token attr-name"},":routes"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("routes"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#itemRender"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ route, paths }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("routes.indexOf(route) === routes.length - 1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` {{ route.breadcrumbName }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("router-link")]),a(),n("span",{class:"token attr-name"},"v-else"),a(),n("span",{class:"token attr-name"},":to"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("`${basePath}/${paths.join('/')}`"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` {{ route.breadcrumbName }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` {{ $route.path }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"interface"),a(),n("span",{class:"token class-name"},"Route"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(` children`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),a(" Array"),n("span",{class:"token operator"},"<"),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token keyword"},"const"),a(" routes "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("Route"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),a(` `),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'index'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'home'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'first'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'first'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(` `),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'/general'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'General'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'/layout'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Layout'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'/navigation'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Navigation'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'second'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'second'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"basePath"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'/components/breadcrumb'"),n("span",{class:"token punctuation"},","),a(` routes`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:t(()=>s[2]||(s[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),a(),n("span",{class:"token attr-name"},":routes"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("routes"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#itemRender"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ route, paths }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("routes.indexOf(route) === routes.length - 1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` {{ route.breadcrumbName }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("router-link")]),a(),n("span",{class:"token attr-name"},"v-else"),a(),n("span",{class:"token attr-name"},":to"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("`${basePath}/${paths.join('/')}`"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` {{ route.breadcrumbName }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` {{ $route.path }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token keyword"},"const"),a(" routes "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'index'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'home'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'first'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'first'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'/general'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'General'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'/layout'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Layout'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'/navigation'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Navigation'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'second'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token literal-property property"},"breadcrumbName"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'second'"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"basePath"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'/components/breadcrumb'"),n("span",{class:"token punctuation"},","),a(` routes`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}const T=i(x,[["render",D]]),U={};function E(l,s){const o=e("a-breadcrumb-item"),c=e("a-breadcrumb"),u=e("demo-box");return r(),d(u,{jsfiddle:{us:`The separator can be customized by setting the separator preperty: separator=">" or use slot="separator"`,cn:'\u7528` separator=">" `\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5206\u9694\u7B26\uFF0C\u6216\u8005\u4F7F\u7528slot="separator"\u81EA\u5B9A\u4E49\u66F4\u590D\u6742\u7684\u5206\u9694\u7B26',docHtml:`

zh-CN

\u7528separator=">"\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5206\u9694\u7B26\uFF0C\u6216\u8005\u4F7F\u7528slot="separator"\u81EA\u5B9A\u4E49\u66F4\u590D\u6742\u7684\u5206\u9694\u7B26

en-US

The separator can be customized by setting the separator preperty: separator=">" or use slot="separator"

`,order:4,title:{"zh-CN":"\u5206\u9694\u7B26","en-US":"Configuring the Separator"},relativePath:"components/breadcrumb/demo/separator.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWIgc2VwYXJhdG9yPSI+Ij4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5Ib21lPC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbSBocmVmPSIiPkFwcGxpY2F0aW9uIENlbnRlcjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj5BcHBsaWNhdGlvbiBMaXN0PC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5BbiBBcHBsaWNhdGlvbjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgPC9hLWJyZWFkY3J1bWI+CiAgPGEtYnJlYWRjcnVtYj4KICAgIDx0ZW1wbGF0ZSAjc2VwYXJhdG9yPjxzcGFuIHN0eWxlPSJjb2xvcjogcmVkIj4+PC9zcGFuPjwvdGVtcGxhdGU+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+SG9tZTwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj5BcHBsaWNhdGlvbiBDZW50ZXI8L2EtYnJlYWRjcnVtYi1pdGVtPgogICAgPGEtYnJlYWRjcnVtYi1pdGVtIGhyZWY9IiI+QXBwbGljYXRpb24gTGlzdDwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+QW4gQXBwbGljYXRpb248L2EtYnJlYWRjcnVtYi1pdGVtPgogIDwvYS1icmVhZGNydW1iPgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWIgc2VwYXJhdG9yPSI+Ij4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5Ib21lPC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbSBocmVmPSIiPkFwcGxpY2F0aW9uIENlbnRlcjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj5BcHBsaWNhdGlvbiBMaXN0PC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5BbiBBcHBsaWNhdGlvbjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgPC9hLWJyZWFkY3J1bWI+CiAgPGEtYnJlYWRjcnVtYj4KICAgIDx0ZW1wbGF0ZSAjc2VwYXJhdG9yPjxzcGFuIHN0eWxlPSJjb2xvcjogcmVkIj4+PC9zcGFuPjwvdGVtcGxhdGU+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+SG9tZTwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj5BcHBsaWNhdGlvbiBDZW50ZXI8L2EtYnJlYWRjcnVtYi1pdGVtPgogICAgPGEtYnJlYWRjcnVtYi1pdGVtIGhyZWY9IiI+QXBwbGljYXRpb24gTGlzdDwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+QW4gQXBwbGljYXRpb248L2EtYnJlYWRjcnVtYi1pdGVtPgogIDwvYS1icmVhZGNydW1iPgo8L3RlbXBsYXRlPg=="}},{default:t(()=>[p(c,{separator:">"},{default:t(()=>[p(o,null,{default:t(()=>s[0]||(s[0]=[a("Home")])),_:1,__:[0]}),p(o,{href:""},{default:t(()=>s[1]||(s[1]=[a("Application Center")])),_:1,__:[1]}),p(o,{href:""},{default:t(()=>s[2]||(s[2]=[a("Application List")])),_:1,__:[2]}),p(o,null,{default:t(()=>s[3]||(s[3]=[a("An Application")])),_:1,__:[3]})]),_:1}),p(c,null,{separator:t(()=>s[4]||(s[4]=[n("span",{style:{color:"red"}},">",-1)])),default:t(()=>[p(o,null,{default:t(()=>s[5]||(s[5]=[a("Home")])),_:1,__:[5]}),p(o,{href:""},{default:t(()=>s[6]||(s[6]=[a("Application Center")])),_:1,__:[6]}),p(o,{href:""},{default:t(()=>s[7]||(s[7]=[a("Application List")])),_:1,__:[7]}),p(o,null,{default:t(()=>s[8]||(s[8]=[a("An Application")])),_:1,__:[8]})]),_:1})]),htmlCode:t(()=>s[9]||(s[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),a(),n("span",{class:"token attr-name"},"separator"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(">"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Home"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("An Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#separator"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" red")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(">"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Home"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("An Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:t(()=>s[10]||(s[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),a(),n("span",{class:"token attr-name"},"separator"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(">"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Home"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("An Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#separator"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" red")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(">"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Home"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("An Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}const z=i(U,[["render",E]]),K={};function Q(l,s){const o=e("a-breadcrumb-item"),c=e("a-breadcrumb-separator"),u=e("a-breadcrumb"),k=e("demo-box");return r(),d(k,{jsfiddle:{us:"The separator can be customized by setting the separator property: `Breadcrumb.Separator`.",cn:"\u4F7F\u7528 `Breadcrumb.Separator` \u53EF\u4EE5\u81EA\u5B9A\u4E49\u5206\u9694\u7B26\u3002",docHtml:`

zh-CN

\u4F7F\u7528 Breadcrumb.Separator \u53EF\u4EE5\u81EA\u5B9A\u4E49\u5206\u9694\u7B26\u3002

en-US

The separator can be customized by setting the separator property: Breadcrumb.Separator.

`,order:6,title:{"zh-CN":"\u5206\u9694\u7B26","en-US":"Configuring the Separator"},relativePath:"components/breadcrumb/demo/separator-indepent.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWIgc2VwYXJhdG9yPSIiPgogICAgPGEtYnJlYWRjcnVtYi1pdGVtPkxvY2F0aW9uPC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItc2VwYXJhdG9yPjo8L2EtYnJlYWRjcnVtYi1zZXBhcmF0b3I+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj5BcHBsaWNhdGlvbiBDZW50ZXI8L2EtYnJlYWRjcnVtYi1pdGVtPgogICAgPGEtYnJlYWRjcnVtYi1zZXBhcmF0b3IgLz4KICAgIDxhLWJyZWFkY3J1bWItaXRlbSBocmVmPSIiPkFwcGxpY2F0aW9uIExpc3Q8L2EtYnJlYWRjcnVtYi1pdGVtPgogICAgPGEtYnJlYWRjcnVtYi1zZXBhcmF0b3IgLz4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5BbiBBcHBsaWNhdGlvbjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgPC9hLWJyZWFkY3J1bWI+CjwvdGVtcGxhdGU+CgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWIgc2VwYXJhdG9yPSIiPgogICAgPGEtYnJlYWRjcnVtYi1pdGVtPkxvY2F0aW9uPC9hLWJyZWFkY3J1bWItaXRlbT4KICAgIDxhLWJyZWFkY3J1bWItc2VwYXJhdG9yPjo8L2EtYnJlYWRjcnVtYi1zZXBhcmF0b3I+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj5BcHBsaWNhdGlvbiBDZW50ZXI8L2EtYnJlYWRjcnVtYi1pdGVtPgogICAgPGEtYnJlYWRjcnVtYi1zZXBhcmF0b3IgLz4KICAgIDxhLWJyZWFkY3J1bWItaXRlbSBocmVmPSIiPkFwcGxpY2F0aW9uIExpc3Q8L2EtYnJlYWRjcnVtYi1pdGVtPgogICAgPGEtYnJlYWRjcnVtYi1zZXBhcmF0b3IgLz4KICAgIDxhLWJyZWFkY3J1bWItaXRlbT5BbiBBcHBsaWNhdGlvbjwvYS1icmVhZGNydW1iLWl0ZW0+CiAgPC9hLWJyZWFkY3J1bWI+CjwvdGVtcGxhdGU+"}},{default:t(()=>[p(u,{separator:""},{default:t(()=>[p(o,null,{default:t(()=>s[0]||(s[0]=[a("Location")])),_:1,__:[0]}),p(c,null,{default:t(()=>s[1]||(s[1]=[a(":")])),_:1,__:[1]}),p(o,{href:""},{default:t(()=>s[2]||(s[2]=[a("Application Center")])),_:1,__:[2]}),p(c),p(o,{href:""},{default:t(()=>s[3]||(s[3]=[a("Application List")])),_:1,__:[3]}),p(c),p(o,null,{default:t(()=>s[4]||(s[4]=[a("An Application")])),_:1,__:[4]})]),_:1})]),htmlCode:t(()=>s[5]||(s[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),a(),n("span",{class:"token attr-name"},"separator"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Location"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-separator")]),n("span",{class:"token punctuation"},">")]),a(":"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-separator")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-separator")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("An Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:t(()=>s[6]||(s[6]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),a(),n("span",{class:"token attr-name"},"separator"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Location"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-separator")]),n("span",{class:"token punctuation"},">")]),a(":"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-separator")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-separator")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("An Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}const O=i(K,[["render",Q]]),$=W({components:{HomeOutlined:Y,UserOutlined:w}});function M(l,s,o,c,u,k){const g=e("home-outlined"),m=e("a-breadcrumb-item"),h=e("user-outlined"),b=e("a-breadcrumb"),y=e("demo-box");return r(),d(y,{jsfiddle:{us:"The icon should be placed in front of the text.",cn:"\u56FE\u6807\u653E\u5728\u6587\u5B57\u524D\u9762\u3002",docHtml:`

zh-CN

\u56FE\u6807\u653E\u5728\u6587\u5B57\u524D\u9762\u3002

en-US

The icon should be placed in front of the text.

`,order:1,title:{"zh-CN":"\u5E26\u6709\u56FE\u6807\u7684","en-US":"With an Icon"},relativePath:"components/breadcrumb/demo/withIcon.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWI+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj4KICAgICAgPGhvbWUtb3V0bGluZWQgLz4KICAgIDwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj4KICAgICAgPHVzZXItb3V0bGluZWQgLz4KICAgICAgPHNwYW4+QXBwbGljYXRpb24gTGlzdDwvc3Bhbj4KICAgIDwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+QXBwbGljYXRpb248L2EtYnJlYWRjcnVtYi1pdGVtPgogIDwvYS1icmVhZGNydW1iPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgSG9tZU91dGxpbmVkLCBVc2VyT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIEhvbWVPdXRsaW5lZCwKICAgIFVzZXJPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJyZWFkY3J1bWI+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj4KICAgICAgPGhvbWUtb3V0bGluZWQgLz4KICAgIDwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0gaHJlZj0iIj4KICAgICAgPHVzZXItb3V0bGluZWQgLz4KICAgICAgPHNwYW4+QXBwbGljYXRpb24gTGlzdDwvc3Bhbj4KICAgIDwvYS1icmVhZGNydW1iLWl0ZW0+CiAgICA8YS1icmVhZGNydW1iLWl0ZW0+QXBwbGljYXRpb248L2EtYnJlYWRjcnVtYi1pdGVtPgogIDwvYS1icmVhZGNydW1iPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBIb21lT3V0bGluZWQsIFVzZXJPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgSG9tZU91dGxpbmVkLAogICAgVXNlck91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:t(()=>[p(b,null,{default:t(()=>[p(m,{href:""},{default:t(()=>[p(g)]),_:1}),p(m,{href:""},{default:t(()=>[p(h),s[0]||(s[0]=n("span",null,"Application List",-1))]),_:1,__:[0]}),p(m,null,{default:t(()=>s[1]||(s[1]=[a("Application")])),_:1,__:[1]})]),_:1})]),htmlCode:t(()=>s[2]||(s[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("home-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("user-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" HomeOutlined"),n("span",{class:"token punctuation"},","),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` HomeOutlined`),n("span",{class:"token punctuation"},","),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),jsVersionHtml:t(()=>s[3]||(s[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb")]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("home-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("user-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),n("span",{class:"token punctuation"},">")]),a("Application List"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-breadcrumb-item")]),n("span",{class:"token punctuation"},">")]),a("Application"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" HomeOutlined"),n("span",{class:"token punctuation"},","),a(" UserOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(` `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(` `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(` HomeOutlined`),n("span",{class:"token punctuation"},","),a(` UserOutlined`),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(` `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(` `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),a(` `)])],-1)])),_:1})}const nn=i($,[["render",M]]),an=W({CN:P,US:N,components:{Basic:j,Overlay:H,Router:T,Separator:z,SeparatorIndepent:O,WithIcon:nn}});function sn(l,s,o,c,u,k){const g=e("basic"),m=e("overlay"),h=e("router"),b=e("separator"),y=e("separator-indepent"),f=e("with-icon"),v=e("demo-sort");return r(),d(v,null,{default:t(()=>[p(g),p(m),p(h),p(b),p(y),p(f)]),_:1})}const on=i(an,[["render",sn]]);export{on as default};