为了使自己的网站SEO更友好，在项目里启用了quasar的Meta插件。但实际使用下来发现文档里的描述不正确。为了动态的更新title和meta信息，文档https://quasar.dev/quasar-plugins/meta 里介绍
Reactive
In the section above, you noticed all of the meta props are “static”. But they can be dynamic (reactive) instead, should you wish. This is how you can manage them just as with a Vue computed property:
// some .vue file
import { useMeta } from 'quasar'
import { ref } from 'vue'
export default {
setup () {
const title = ref('Some title') // we define the "title" prop
// NOTICE the parameter here is a function
// Under the hood, it is converted to a Vue computed prop for reactivity
useMeta(() => {
return {
// whenever "title" from above changes, your meta will automatically update
title: title.value
}
})
function setAnotherTitle () {
title.value = 'Another title' // will automatically trigger a Meta update due to the binding
}
return {
setAnotherTitle
}
}
}
但我使用下来，meta的tag信息是动态改变了（ssr模式返回的response里html的meta信息已经改成了相应detail页面的商品信息），但title信息却没有改变（ssr模式返回的response里的html的title没有改变成对应detai页面的商品信息）
代码如下：
setup() {
console.log('DetailPage setup');
const title = ref(
'好价党 各大电商今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息'
);
const meta = reactive({
description: {
name: 'description',
content:
'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，手慢无，秒杀，京东低价，优惠信息',
},
keywords: {
name: 'keywords',
content:
'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息',
},
ogtype: {
property: 'og:type',
content: 'product',
},
ogurl: {
property: 'og:url',
content: '',
},
ogtitle: {
property: 'og:title',
content:
'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息',
},
ogdescription: {
property: 'og:description',
content:
'汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息',
},
ogimage: {
property: 'og:image',
content: 'https://www.hjdang.com/hjd.png',
},
weibocreate: {
name: 'weibo:webpage:create_at',
content: '',
},
weiboupdate: {
name: 'weibo:webpage:update_at',
content: '',
},
});
useMeta(() => {
return {
// whenever "title" from above changes, your meta will automatically update
title: title.value,
meta: meta,
};
});
function setAnotherTitle(value) {
title.value = value; // will automatically trigger a Meta update due to the binding
}
return {
setAnotherTitle,
meta,
};
},
created() {
console.log('Detail page created');
this.detail = this._detail;
this.detailParts = this._detailParts;
this.bigImages = this._bigImages;
this.couponInfo = this._couponInfo;
this.setAnotherTitle(this._detail.title);
this.meta.description.content =
this._detail.title + this.detail.emphsis + this.detail.detailBrief;
let keywords = this.detail.mall;
if (this._categoryInfo) {
this._categoryInfo.slice(1).forEach((a) => (keywords += ',' + a));
}
this.meta.keywords.content = keywords;
this.meta.ogtitle.content = this._detail.title;
this.meta.ogurl.content = 'https://www.hjdang.com/item/detail/' + this.$route.params.urlCode;
this.meta.ogdescription.content = this.detail.emphsis + this.detail.detailBrief;
this.meta.ogimage.content = this.detail.mainImageUrl;
this.meta.weibocreate.content = new Date();
this.meta.weiboupdate.content = new Date();
},
但从服务器返回的html里title并没有被改变，但meta.description是被改变了，虽然最终页面上通过Inspect看到的title也是动态改变了，但这个是在前端runtime改变的。为了让搜索引擎看到最终的信息，需要在返回的repsonse里就已经改变
title应该被改成商品的title：PEAK 匹克 。。。才对，但还是初始值
经过我的一番调查，在quasar的guihub上发现了两个帖子，
https://github.com/quasarframework/quasar/discussions/12178#discussioncomment-2046672
https://github.com/quasarframework/quasar/discussions/12388
他的问题和我相反，是title已经动态改变，但meta信息没变。注意到他的useMeta里返回的是title，不是title.value,而meta返回的是myDescription.value，和我的正好相反
import { useMeta } from "quasar";
import { ref } from "vue";
export default {
setup() {
const title = ref("First page");
const myDescription = ref({
name: "description",
content: "First page quasar app",
});
useMeta(() => {
return {
title: title,
titleTemplate: (title) => `${title.value}`,
meta: {
description: myDescription.value,
},
};
});
const setMetaContent = () => {
title.value = "Title Changed";
myDescription.value = {
name: "description",
content: "Hey I am changed",
};
}
return {
setMetaContent,
};
},
serverPrefetch() {
this.setMetaContent();
},
mounted() {
this.setMetaContent();
},
};
这是useMega里返回
return {
title: title,
titleTemplate: (title) => `${title.value}`,
};
可以，但返回
return {
// whenever "title" from above changes, your meta will automatically update
title: title.value,
};
就不可以，也就是不能加 .value,果然改了之后就好了
setup() {
console.log('DetailPage setup');
const title = ref(
'好价党 各大电商今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息'
);
const meta = reactive({
description: {
name: 'description',
content:
'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，手慢无，秒杀，京东低价，优惠信息',
},
keywords: {
name: 'keywords',
content:
'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息',
},
ogtype: {
property: 'og:type',
content: 'product',
},
ogurl: {
property: 'og:url',
content: '',
},
ogtitle: {
property: 'og:title',
content:
'好价党 汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息',
},
ogdescription: {
property: 'og:description',
content:
'汇聚互联网今日特价 京东，淘宝，天猫，唯品会，支付宝，小米，京喜百元生活费，折扣，优惠券，手慢无，秒杀，低价，优惠信息',
},
ogimage: {
property: 'og:image',
content: 'https://www.hjdang.com/hjd.png',
},
weibocreate: {
name: 'weibo:webpage:create_at',
content: '',
},
weiboupdate: {
name: 'weibo:webpage:update_at',
content: '',
},
});
useMeta(() => {
return {
// whenever "title" from above changes, your meta will automatically update
title: title,
titleTemplate: (title) => `${title.value}`,
meta: meta,
};
});
function setAnotherTitle(value) {
title.value = value; // will automatically trigger a Meta update due to the binding
}
// setAnotherTitle('sdsdssds');
// console.log('title is' + title.value);
return {
setAnotherTitle,
meta,
};
},
这样就好了，可能是他们文档写的有问题。
标签：手慢,插件,title,quasar,detail,value,content,meta From： https://www.cnblogs.com/zjhgx/p/17413266.html