Vue хлебные крошки не могут найти мета - PullRequest
Новая
       4

Vue хлебные крошки не могут найти мета

0 голосов
/ 03 февраля 2020

Я пытаюсь создать динамические c хлебные крошки, но он не может получить мета моих маршрутов:

Ошибка

[Vue предупреждение]: Ошибка при рендеринге: " Ошибка типа: Невозможно прочитать свойство 'meta' из неопределенного "

Код

route.js

// ADMIN ROUTES
{
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: {
        requiresAuth: true,
        layout: 'admin',
        name: 'dashboard',
        breadCrumb: 'Dashboard' //here
    }
},
{
    path: '/dashboard/products',
    name: 'adminProducts',
    component: AdminProducts,
    meta: {
        requiresAuth: true,
        layout: 'admin',
        breadCrumb: 'Products' //here
    }
},
// and so on...

Admin.vue (layout of my admin dashboard)

<script>
    import FooterBar from './footerBar.vue';
    import navBar from './navBar.vue';
    import adminAside from './adminAside.vue';
    export default {
        name: 'admin',
        data(){
            return {
                site_name: process.env.MIX_APP_NAME
            }
        },
        components: {
           FooterBar,
           navBar,
           adminAside
        },
        computed: {
            crumbs: function() {
                let pathArray = this.$route.path.split("/")
                pathArray.shift()
                let breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
                    breadcrumbArray.push({
                    path: path,
                    to: breadcrumbArray[idx - 1]
                        ? "/" + breadcrumbArray[idx - 1].path + "/" + path
                        : "/" + path,
                    text: this.$route.matched[idx].meta.breadCrumb || path,
                    });
                    return breadcrumbArray;
                }, [])
                return breadcrumbs;
            }
        },
    }
</script>

html

<el-breadcrumb v-for="(item, i) in crumbs" :key="i" separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="item.path">{{ item.name }}</el-breadcrumb-item>
</el-breadcrumb>

Есть идеи?

1 Ответ

0 голосов
/ 03 февраля 2020

Ошибка пришла из этой строки. 

text: this.$route.matched[idx].meta.breadCrumb || path,

Это потому, что вы обращаетесь к индексу для matched route, где этот индекс недоступен в массиве. Кажется, что совпавший маршрут содержит только один элемент, и вы нацеливаетесь на индекс 1 после итерации вашего pathArray.

Или я должен сказать, что вы ориентируетесь на индекс в согласованном маршруте, где он не существует.

Вот почему vue вернул это предупреждение. 

[Vue warn]: Error in render: "TypeError: Cannot read property 'meta' of undefined"

Пожалуйста, проверьте ваш matched route, если он содержит элементы, равные длине pathArray.

...