面包屑

显示当前页面的路径,快速返回之前的任意页面。

基础用法

  • 使用.vus-breadcrumb类,作为面包屑样式。
  • .item:项目。
  • .link:链接。
  • .active:当前选中。
  • v--text:分隔符属性。
<ul class="vus-breadcrumb">
   <li class="item">
      <a href="#" class="link">首页</a>
   </li>
   <li class="item" v--text="/">
      <a href="#" class="link">原创作品</a>
   </li>
   <li class="item" v--text="/">
      <a href="#" class="link">作品列表</a>
   </li>
   <li class="item" v--text="/">
      <a class="active">作品详细</a>
   </li>
</ul>

分隔符

修改v--text属性值改变分隔符。

<ul class="vus-breadcrumb">
   <li class="item">
      <a href="#" class="link">首页</a>
   </li>
   <li class="item" v--text="&gt;">
      <a href="#" class="link">原创作品</a>
   </li>
   <li class="item" v--text="&gt;">
      <a href="#" class="link">作品列表</a>
   </li>
   <li class="item" v--text="&gt;">
      <a class="active">作品详细</a>
   </li>
</ul>