你能在 Vuejs 中将参数传递给 mixin 吗?

Question

我正在使用NuxtJS的头标签。 我的应用程序中的元标记经常重复或只有轻微的变化。

我想将标题传递到 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 }
]
}
}
}

Answer 1

不可能直接将任何参数传递到head()方法中，但this在那里可用。head()是直接在页面上定义还是使用 mixin 定义并不重要。只要确保不要在个别页面上覆盖它......