我正在使用NuxtJS的head标签。我的应用程序中的meta标记经常重复或只有很小的变化。
我想将标题传递给mixin,然后将代码重新用于应用程序中的所有页面。但是,我不确定如何在vuejs中执行此操作。有什么建议吗?
export const metatags = {
head () {
const organization = this.$store.state.loadedData
const title = 'Classes & Lessons - ' + organization.organization.name + ' ' +
organization.target_locations[0]
const description =
(organization.organization.name
? organization.organization.name
: '') +
' is ' +
(organization.services.length > 0
? organization.target_locations[0]
: '') +
"'s premier " +
(organization.services.length > 0
? organization.services[0].name
: '') +
' and ' +
(organization.services.length > 1
? organization.services[1].name
: '') +
' training centers'
const logo = process.env.AMAZONAWS_IMAGE_URL +
organization.organization.primary_logo_id + '_350.' + organization.organization.logo_extension
const favicon = logo
const domain = 'https://' + this.$store.state.domain
return {
title,
meta: [
{
name: 'description',
content: description
},
{
property: 'og:title',
content: title
},
{
property: 'og:site_name',
content: organization.organization.name
},
{
property: 'og:description',
content: description
},
{
property: 'og:image',
content: logo
},
{
property: 'og:url',
content: domain
},
{
name: 'twitter:title',
content: title
},
{
name: 'twitter:description',
content: description
},
{
name: 'twitter:image',
content: logo
}
],
link: [
{ rel: 'canonical', href: domain },
{ rel: 'icon', href: logo },
{ rel: 'shortcut icon', href: logo },
{ rel: 'apple-touch-icon', href: logo },
{ rel: 'icon', type: 'image/x-icon', href: favicon }
]
}
}
}
无法直接将任何参数传递到head()
方法中,但是this
为available there。直接在页面上定义head()
还是使用mixin都没有关系。只要确保不要在单个页面上覆盖它即可。...