Vue 面包屑找不到元

Question

我正在嘗試制作動態面包屑，但它無法獲取我的路線的元數據：

錯誤

[Vue 警告]：渲染錯誤：“TypeError：無法讀取未定義的屬性‘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>

任何的想法？

Answer 1

錯誤來自這一行。

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

這是因為您正在訪問matched route的索引，而該索引在數組中不可用。 似乎匹配的路由只包含一個元素，並且您在迭代 pathArray 時將索引設為 1。

或者我應該說，您的目標是匹配路由中不存在的索引。

這就是 vue 返回此警告的原因。

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

請檢查您matched route是否包含等於pathArray長度的pathArray 。