kvuse

Appearance

Return to top
On this page

Breadcrumb 面包屑

基础使用

可通过设置path, 跳转路径

首页
/
前台
vue
<template>
  <k-breadcrumb :list="list" />
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { title: '首页', path: 'home' },
  { title: '前台' },
]);
</script>

左右布局

首页
/
前台
vue
<template>
  <k-breadcrumb :list="list">
    <k-button>设置</k-button>
  </k-breadcrumb>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { title: '首页', path: 'home' },
  { title: '前台' },
]);
</script>

href 模式

可通过设置url, 跳转链接地址

百度
/
掘金
/
其他
vue
<template>
  <k-breadcrumb :list="list" />
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { title: '百度', url: 'https://www.baidu.com/' },
  { title: '掘金', url: 'https://juejin.cn/' },
  { title: '其他' },
]);
</script>

List 属性