Nuxt动态设置title
在nuxt.config.ts里配置head的title,会默认给每个页面都加上这样的title。审查元素,浏览器标签页或者查看网页源代码的时候就能看到title里的内容。我一开始写了固定的内容,通过useHead给某些页面设置title。这样是可以设置title的,审查元素以及浏览器标签页都是新设置的title,但是查看网页源代码,title还是nuxtConfig文件里配置的。这样是不行的。
解决办法:config文件里不要写固定的,用模板,然后在需要设置title的页面使用<Title标签,会自动识别放到head里
export default defineNuxtConfig({
app: {
head: {
// title: '我是title', // 这样不行,不能固定写死了
titleTemplate: '%s', // 用模板,具体参考官网
meta: [
{ charset: 'utf-8' },
{ name: 'renderer', content: 'webkit', 'data-n-head': true },
{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1' },
{ name: 'keywords', content: "xxx" },
{ name: 'description', content: "xxx" },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js' }
]
}
}
// 在vue文件里使用<Title>
<template>
<div class="about-page">
<Title>{{ obj.name}}</Title> // 就是这个title
<div>我与我们,暴富,暴富,暴富</div>
</div>
</template>
<script lang="ts" setup >
// useHead
const getData = async () => {
const { data } = await getInfo({id: id.value})
useHead({
title: `${data.name}的页面`,
meta: [
{ property: 'og:title', content: `${data.name}` }
],
})
}
</script>
记得title标签也要放在根标签里哦,一个vue文件只能有一个根