علیرضا حمید

پیاده سازی Breadcrumb دینامیک در پروژه nuxt

علیرضا حمید ۱۳۹۸/۰۹/۲۷ زبان برنامه‌نویسی جاوا‌اسکریپت

سلام دوستان عزیز
امیدوارم حالتون خوب باشه.
کسی میدونه چجوری باید یک 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>
ahmadkhalili47
ahmadkhalili47
۱۳۹۹/۰۶/۲۹

سلام. از فریم ورک ها استفاده کن.
https://vuetifyjs.com/en/components/breadcrumbs/

https://bootstrap-vue.org/docs/components/breadcrumb