سلام دوستان عزیز
امیدوارم حالتون خوب باشه.
کسی میدونه چجوری باید یک breadcrumb رو توی پروژه ام پیاده کنم ؟
پروژه ام بر اساس nuxt پیاده شده .
راه حل بدید لطفا .
اگر شد نمونه کد یا مقاله یا مطلبی چیزی بفرستید من مطالعه کنم
سلام علیرضا
این میتونه وابسته به پروژت باشه اما شاید این به دردت بخوره
که البته باید تغییراتی که میخواهی رو اعمال کنی
<template>
<nav aria-label="breadcrumb" class="breadcrumbs">
<ol class="breadcrumb" v-cloak>
<li
v-for="(item,key) in breadCrumbItems"
:key="key"
:class="[(key + 1 === breadCrumbItems.length) ? 'active' : '']"
class="breadcrumb-item px-0"
>
<nuxt-link class="px-2" v-if="item.href" :to="item.href" exact>{{ item.title }}</nuxt-link>
<span class="px-2" v-else>{{ item.title }}</span>
</li>
</ol>
</nav>
</template>
<script>
export default {
name: 'breadcrumb-component',
data() {
return {
withHome: true
}
},
props: {
items: {
type: Array,
default() {
return [
{
title: '',
href: '#'
}
]
}
}
},
computed: {
breadCrumbItems() {
if (this.withHome) {
let home = {
title: 'خانه',
href: '/hall'
}
this.items.unshift(home)
}
return this.items
}
}
}
</script>سلام. از فریم ورک ها استفاده کن.
https://vuetifyjs.com/en/components/breadcrumbs/
https://bootstrap-vue.org/docs/components/breadcrumb