提交 issue修改本页

Breadcrumb

面包屑导航， 类似于嵌套路由，可以显示出当前route的父级以上的router，可点击跳转

总览

面包屑导航在存在route重定向的情况下，可能会存在某个元素指向的url就是当前route，在vue版本或者vue-router版本过低的情况下（目前知道vue-router 3以下会导致此问题，但不百分比百保证），会报错如下

Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}

解决方法可以尝试

// main.js写入

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

// 或者降低vue-router版本
npm i vue-router@3.0 -S

item

数组元素，可以生成多个 nly-breadcrumb-item

<template>
    <div>
        <nly-badge variant="info"> to </nly-badge>
        <nly-breadcrumb :item="itemTo" />

        <nly-badge variant="info"> href </nly-badge>
        <nly-breadcrumb :item="itemHref" />
    </div>
</template>

<script>
    export default {
        data() {
            return {
                itemTo: [
                    {
                        text: '文档',
                        to: '/docs'
                    },
                    {
                        text: '组件',
                        to: '/docs/components/'
                    },
                    {
                        text: 'Breadcrumb',
                        to: '/docs/components/breadcrumb'
                    }
                ],
                itemHref: [
                    {
                        text: '文档',
                        to: '/docs'
                    },
                    {
                        text: '组件',
                        to: '/docs/components/'
                    },
                    {
                        text: 'Breadcrumb',
                        to: '/docs/components/breadcrumb'
                    }
                ]
            }
        }
    }
</script>

<!-- item.name -->
<!-- nly-breadcrumb.vue -->

icon

icon 图标

<template>
    <div>
        <nly-breadcrumb :item="itemIcon" />
        <nly-breadcrumb :item="itemIconOnly" />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                itemIcon: [
                    {
                        text: '文档',
                        to: '/docs',
                        icon: 'nlyfont nly-icon-home-fill',
                        linkClass: 'text-danger'
                    },
                    {
                        text: '组件',
                        to: '/docs/components/',
                        icon: 'nlyfont nly-icon-outlet'
                    },
                    {
                        text: 'Breadcrumb',
                        to: '/docs/components/breadcrumb',
                        icon: 'nlyfont nly-icon-security-fill'
                    }
                ],
                itemIconOnly: [
                    {
                        text: '文档',
                        to: '/docs',
                        icon: 'nlyfont nly-icon-home-fill',
                        linkClass: 'text-info'
                    },
                    {
                        text: '组件',
                        to: '/docs/components/',
                        linkClass: 'text-danger'
                    },
                    {
                        text: 'Breadcrumb',
                        to: '/docs/components/breadcrumb'
                    }
                ]
            }
        }
    }
</script>

<!-- icon.name -->
<!-- nly-breadcrumb.vue -->
<template>
    <nly-breadcrumb>
        <nly-breadcrumb-item icon="nlyfont nly-icon-home-fill" to="/docs">
            docs
        </nly-breadcrumb-item>
        <nly-breadcrumb-item
            icon="nlyfont nly-icon-outlet"
            to="/docs/components"
            active
        >
            components
        </nly-breadcrumb-item>
    </nly-breadcrumb>
</template>

<!-- icon.name -->
<!-- nly-breadcrumb.vue -->

text

文本内容

<template>
    <nly-breadcrumb>
        <nly-breadcrumb-item
            icon="nlyfont nly-icon-home-fill"
            to="/docs"
            text="docs"
        />
        <nly-breadcrumb-item
            icon="nlyfont nly-icon-outlet"
            to="/docs/components"
            active
            text="components"
        />
    </nly-breadcrumb>
</template>

<!-- text.name -->
<!-- nly-breadcrumb.vue -->

target

决定新路由跳转窗口

<template>
    <nly-breadcrumb>
        <nly-breadcrumb-item
            icon="nlyfont nly-icon-home-fill"
            to="/docs"
            text="docs"
            target="_blank"
        />
        <nly-breadcrumb-item
            icon="nlyfont nly-icon-outlet"
            to="/docs/components"
            text="components"
            target="_parent"
        />
        <nly-breadcrumb-item
            icon="nlyfont nly-icon-outlet"
            to="/docs/components/breadcrumb"
            text="breadcrumb"
            target="_top"
        />
    </nly-breadcrumb>
</template>

<!-- target.name -->
<!-- nly-breadcrumb.vue -->

组件参数

查看源码

<nly-breadcrumb>

函数式组件（Functional component）

props 参数

props类型默认值描述
item
Arraynullnly-breadcrumb-item props的数组，每个元素接受nly-breadcrumb-item组件的所有props。传入item会自动渲染nly-breadcrumb-item组件，这时会渲染成一个完整的breadcrumb。如果不传入item，则需要手动插入nly-breadcrumb-item组件。
breadcrumb-class
String自定义css式样
查看源码

<nly-breadcrumb-item>

函数式组件（Functional component）

props 参数

props (Click to sort Ascending)类型默认值描述
href
Stringnull普通 url 地址
rel
Stringnull设置 rel 属性
target
String'_self'link 的 target 属性，可选_blank，_self，_parent，_top，framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用，设置true为禁用状态
to
String or Objectnull点击跳转的页面， 可以是路由对象或者字符串，以router-link router.push()跳转
append
Booleanfalserouter-link，需要使用 to 或者 href 这个 props，将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true，比如当前 http://localhost:8080/link，to='collapse'，则会跳转到 http://localhost:8080/link/collapse
replace
Booleanfalserouter-link router.replace()跳转
event
String or Array'click'点击事件，尽量不要和to以及href同时使用，如果同时使用，点击事件和跳转会依次发生
active-class
String激活状态css类名
exact
Booleanfalserouter-link，设置true开启路由匹配模式
exact-active-class
String'active'exact为true的情况下，当路由匹配成功，会激活exactActiveClass。类似active-class，是一个自定义css类
router-tag
String'a'router-link 标签，通常建议不修改
no-prefetch
Booleanfalsenuxt-link
text
Stringnull文本内容
html
Stringnullhtml文本内容
aria-current
String'location'
icon
Stringicon图标
item-class
Stringitem自定义css式样
link-class
Stringitem中link自定义css式样

<nly-breadcrumb-item> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

Events

EventArgumentsDescription
click
  1. event - 原生点击事件
点击触发事件

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-breadcrumb>NlyBreadcrumbnly-adminlte-vue
<nly-breadcrumb-item>NlyBreadcrumbItemnly-adminlte-vue

例子

import { NlyBreadcrumb } from 'nly-adminlte-vue'
Vue.component('nly-breadcrumb', NlyBreadcrumb)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
BreadcrumbPluginnly-adminlte-vue

例子

import { BreadcrumbPlugin } from 'nly-adminlte-vue'
Vue.use(BreadcrumbPlugin)