nuxt项目中面包屑组建breadcrumb获取不到route的meta信息

题目描述

  1. 我用nuxt来开发一个应用,在component中我创建了一个面包屑组件breadcurmb,在组件中获取$route.matched,但是遍历之后meta信息为空。

题目来源及自己的思路

因为nuxt的路由是自动生成的,所以不知道nuxt怎么设置和获取route的meta信息。

我是在面包屑组件中写了个列表来遍历设置breadcrumb的,但是感觉这样每写个页面都必须配置这个组件的信息,耦合太严重,但是在页面中通过head()函数来设置的meta信息在这里是获取不到的。

求大神给个解决方案。

相关代码

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(breadcrumb,index) in breadcrumbList" :key="index" :to="{path: breadcrumb.path}">
     
        {{breadcrumb.breadcrumb}}
     
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
const breadcrumbs = {
  '/index': '首页',
  '/equipment': '设备管理',
  '/equipment/category': '类型管理',
  '/equipment/category/:id': '类型详情',
  '/equipment/category': '类型管理',
  '/equipment/category': '类型管理',
  '/equipment/category': '类型管理',
  '/equipment/category': '类型管理',
  '/equipment/category': '类型管理',
  '/equipment/category': '类型管理',
}
export default {
    data() {
      return ({
        breadcrumbList: []
      })
    },
    methods: {      
      /** 
       * 面包屑
       *  */
      breadcrumb() {
        let crumbs = []
        this.$route.matched.forEach((item) => {
          if (breadcrumbs[item.name] || breadcrumbs[item.path]) {
            item.breadcrumb = breadcrumbs[item.path]
            crumbs.push(item)
          }
        })
        console.log(this.$route.matched)
        console.log(crumbs)
        this.breadcrumbList = crumbs
      },
    },
    watch: {
      $route() {
        this.breadcrumb_listener()
      }
    },
    created() {
      this.breadcrumb_listener()
    }
}
</script>

<style lang="scss" scoped>

</style>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注