Nuxtjs如何获取组件上的路由元数据和所有路由元数据？

Question

我的项目package.json

"dependencies": {     
  "core-js": "^3.15.1",
  "nuxt": "^2.15.7",
  "nuxt-property-decorator": "^2.9.1",     
}

我的页面目录

- pages
  - a.vue
  - b.vue

页面组件

// a.vue
<template>    
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({   
  meta: {
    title: 'PageA'      
  },
})
export default class extends Vue {
  public mounted() {
    // ignored... see the below
  }
}
</script>
 
// b.vue
<template>    
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({   
  meta: {
    title: 'PageB'      
  },
})
export default class extends Vue {}
</script>

在a.vue中我想获取路由元和所有路由元。

对于路由元。

public mounted() {          
    console.log(this.$route.meta);
    console.log(this.$nuxt.$options.context.route.meta);
    console.log(this.$nuxt.context.route.meta);
     
    // {}
    // [{{title: "PageA"}}]
    // [{{title: "PageA"}}]
}

对于所有路由元。

public mounted() {        
    console.log(this.$router.getRoutes().map((r) => r.meta));
    console.log(this.$router.options.routes?.map((r) => r.meta));
    console.log(this.$nuxt.$router.getRoutes().map(r => r.meta));
     
    // [{},{}]
    // [undefined, undefined]
    // [{},{}]
}

我的问题：

关于获取路由元数据

为什么 this.$route.meta 是空的？我可以在 vue cli 项目中使用 $route.meta 来获取路由元数据。这是 nuxtjs 中的错误吗？
this.$nuxt.$options.context.route.meta 和 this.$nuxt.context.route.meta 有什么区别？

关于获取所有路由meta

在 nuxtjs 中获取所有路由元数据的正确方法是什么？

Answer 1

终于，我找到了解决办法。使用 @nuxtjs/router-extras 设置路由器元数据，一切正常。

页面组件

// a.vue
<template></template>
<router>
  {
    meta: {
      title: 'PageA'
    }
  }
</router>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class extends Vue {
  public mounted() {
    // ignored... see the below
  }
}
</script>

// b.vue
<template></template>
<router>
  {
    meta: {
      title: 'PageB'
    }
  }
</router>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class extends Vue {}
</script>

在a.vue获取当前路由meta和所有路由meta。

  public mounted() {
    console.log(this.$route.meta)
    console.log(this.$nuxt.$options.context.route.meta)
    console.log(this.$nuxt.context.route.meta)  
    // {title: "PageA"}
    // [{{title: "PageA"}}]
    // [{{title: "PageA"}}]
    
    console.log(this.$router.getRoutes().map((r) => r.meta))
    console.log(this.$router.options.routes?.map((r) => r.meta))
    console.log(this.$nuxt.$router.getRoutes().map((r) => r.meta))  
    // [{title: "PageA"},{title: "PageB"}]
    // [{title: "PageA"},{title: "PageB"}]
    // [{title: "PageA"},{title: "PageB"}]
  }

Nuxtjs如何获取组件上的路由元数据和所有路由元数据？

How to get route meta and all route meta on the component in Nuxtjs?

javascript

typescript

vue.js

vue-router

nuxt.js

我的问题：