1. خانه
  2. فروم
  3. پیاده سازی Breadcrumb دینامیک در پروژه nuxt

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

سلام دوستان عزیز
امیدوارم حالتون خوب باشه.
کسی میدونه چجوری باید یک breadcrumb رو توی پروژه ام پیاده کنم ؟
پروژه ام بر اساس nuxt پیاده شده .
راه حل بدید لطفا .
اگر شد نمونه کد یا مقاله یا مطلبی چیزی بفرستید من مطالعه کنم

پاسخ ها
sokanacademy forum
کاربر سکان آکادمی 4 سال پیش

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

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

sokanacademy forum
کاربر سکان آکادمی 3 سال پیش

سلام علیرضا

این میتونه وابسته به پروژت باشه اما شاید این به دردت بخوره

که البته باید تغییراتی که میخواهی رو اعمال کنی

<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>
online-support-icon