diff --git a/examples/routers/breadcrumb.vue b/examples/routers/breadcrumb.vue index 057bce5..de0e90c 100644 --- a/examples/routers/breadcrumb.vue +++ b/examples/routers/breadcrumb.vue @@ -8,7 +8,7 @@ <div> <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>"> <Breadcrumb-item href="/">Home4</Breadcrumb-item> - <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item> + <Breadcrumb-item href="/checkbox" replace>Components</Breadcrumb-item> <Breadcrumb-item>Breadcrumb</Breadcrumb-item> </Breadcrumb> <Breadcrumb separator=""> diff --git a/src/components/breadcrumb/breadcrumb-item.vue b/src/components/breadcrumb/breadcrumb-item.vue index d3bba1b..5bcd91d 100644 --- a/src/components/breadcrumb/breadcrumb-item.vue +++ b/src/components/breadcrumb/breadcrumb-item.vue @@ -1,6 +1,6 @@ <template> <span> - <a v-if="href" :href="href" :class="linkClasses"> + <a v-if="href" :class="linkClasses" @click="handleClick"> <slot></slot> </a> <span v-else :class="linkClasses"> @@ -20,6 +20,10 @@ props: { href: { type: String + }, + replace: { + type: Boolean, + default: false } }, data () { @@ -28,9 +32,6 @@ showSeparator: false }; }, - mounted () { - this.showSeparator = this.$slots.separator !== undefined; - }, computed: { linkClasses () { return `${prefixCls}-link`; @@ -38,6 +39,19 @@ separatorClasses () { return `${prefixCls}-separator`; } + }, + mounted () { + this.showSeparator = this.$slots.separator !== undefined; + }, + methods: { + handleClick () { + const isRoute = this.$router; + if (isRoute) { + this.replace ? this.$router.replace(this.href) : this.$router.push(this.href); + } else { + window.location.href = this.href; + } + } } }; </script> -- libgit2 0.21.4