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 长度的元素。