Breadcrumb 面包屑 #
显示当前页面的路径，快速返回之前的任意页面。
基础用法 #
在 tass-breadcrumb 中使用 tass-breadcrumb-item 标签表示从首页开始的每一级。 该组件接受一个 String 类型的参数 separator-icon来作为分隔符。 默认值为"chevronright"。
展开查看
vue
<template>
<tass-breadcrumb>
<tass-breadcrumb-item :to="{ path: '/' }">homepage</tass-breadcrumb-item>
<tass-breadcrumb-item>promotion management</tass-breadcrumb-item>
<tass-breadcrumb-item to="/">promotion list</tass-breadcrumb-item>
<tass-breadcrumb-item>promotion list</tass-breadcrumb-item>
</tass-breadcrumb>
</template>
图标分隔符 #
通过设置 separator-icon 可使用相应的 tassUI中icon的名字作为分隔符
展开查看
vue
<template>
<tass-breadcrumb separator-icon="rocket">
<tass-breadcrumb-item :to="{ path: '/' }">homepage</tass-breadcrumb-item>
<tass-breadcrumb-item>promotion management</tass-breadcrumb-item>
<tass-breadcrumb-item to="/">promotion list</tass-breadcrumb-item>
<tass-breadcrumb-item>promotion list</tass-breadcrumb-item>
</tass-breadcrumb>
</template>
路由跳转记录 #
通过设置replace 如果设置该属性为 true, 导航将不会留下历史记录
promotion management
展开查看
vue
<template>
<tass-breadcrumb separator-icon="rocket">
<tass-breadcrumb-item :to="{ path: '/' }" replace>homepage</tass-breadcrumb-item>
<tass-breadcrumb-item>promotion management</tass-breadcrumb-item>
</tass-breadcrumb>
</template>