vue.js - 如何在watch :$route for Nuxt/Vue中获取页面标题

Question

基于 Nuxt/Vue 的应用程序在 watch:$route 以及 this.$route 名称、路径中接收，但从不接收元数据。 例如。我有一个带有

的页面 Foo

export default {
    ...
    head(){
        return{
            title: 'Foo'
        }
    },
    meta: {
        title: 'Foo'
    }
}

在布局中

export default {

    created() {    
        console.log( this.$route );
    }

    watch:{
        $route ({ path, name, meta }){
            console.log( meta );
        }
    }
}

但是，它在中间件中可用

export default function ({ store, route }) {
    console.log( route );
}

我可以从中间件填充商店并在应用程序中依赖它，但对我来说这不是一个好的解决方案。

是否有任何合适的方法来接收带有路由器事件的页面(路由)元数据？ 实际上我需要的是内部 (SPA) 导航事件的页面标题。

Answer 1

Nuxt 有一个名为 vue-meta 的插件默认安装。它是 Vue.js 的 HTML 元数据管理器。

阅读guide因为使用它会非常有帮助，并允许您遵循有关 HTML 元的最佳实践，例如当前页面标题，但基本上您可以使用类似的东西:

// in the layout root component, use a computed like this to display the page title:
export default {
  computed: {
    title(ctx) {
      return ctx.$root.$meta().refresh().metaInfo.titleChunk
    },
  }
}
// in each page component, set the page title, using `vue-meta` conventions:
export default {
  head() {
    return {
      title: 'Dashboard',
    }
  },
}