面包屑导航 Breadcrumb

显示当前页面的路径，快速返回之前页面。

静态组件渲染

• 首页
• 商品管理
• 商品管理

查看代码

<ul class="open-breadcrumb">
	<li class="open-breadcrumb-item"><a href="/">首页</a></li>
	<li class="open-breadcrumb-item"><a href="/">商品管理</a></li>
	<li class="open-breadcrumb-item active">商品管理</li>
</ul>

动态组件渲染

默认路由最后一个数据是当前页面path

查看代码

<div class="open-container">
	<div id="url"></div>
</div>

<script setup>
	import { onMounted } from 'vue'
	import openui from '../openui@0.1.0-beta/js/openui.esm.js'

	onMounted(()=>{

		// 路由数据
		const url = [
			{
				name: '首页',
				url: '/'
			},
			{
				name: '管理页',
				url: '/'
			},
			{
				name: '当前页',
				url: '/'
			}
		];

		// 渲染模版
    	breadcrumb.render({
			id: '#url',
			data: url
		})
	})

</script>

API

API	描述
breadcrumb.render(options)	动态渲染

动态渲染

breadcrumb.render(options)

• 参数options:基础属性配置

属性名	描述	类型	必填	默认值
id	dom选择器	string	是	-
data	路由数据	array	是	-