装置 vue-meta
npm i -S vue-meta@next目前 vue-meta3 还是处于 alpha 阶段，不要低于 3.0.0-alpha.7
我的项目构造
.src├── App.vue├── global│ └── vue-meta│ ├── component.tsx│ └── index.ts├── main.ts├── router│ └── index.ts├── store│ └── index.ts├── types│ └── vue-router.d.ts└── views ├── About.vue └── Home.vue开发
// global/vue-meta/index.tsimport { createMetaManager } from 'vue-meta'export default createMetaManager(false, {})// main.tsimport { createApp } from 'vue'import App from './App.vue'import router from '@/router'import vueMetaManager from '@/global/vue-meta'const app = createApp(App)app .use(router) .use(vueMetaManager)app.mount('#app')// global/vue-meta/components.tsximport router from '@/router'import { watch } from '@vue/runtime-core'import { Options, setup, Vue } from 'vue-class-component'import { SlotScopeProperties, useMeta } from 'vue-meta'@Options<VueMeta>({ render () { const slots = { title: ({ content }: SlotScopeProperties) => { return content ? `${content} | SITE_NAME` : 'SITE_NAME' }, } // metainfo是全局组件，由vue-meta注入 // 这里不能够应用 h('metainfo')，无奈正确渲染 metainfo 组件。起因未知 return <metainfo v-slots={slots} /> },})export default class VueMeta extends Vue { protected meta = setup(() => { const { meta } = useMeta({ title: '', }) // 监听以后路由对象 批改 meta 信息 watch(router.currentRoute, () => { const route = router.currentRoute.value const metaInfo = route.meta?.metaInfo ?? true // true：应用 route.meta.title // false：由页面组件通过 useMeta 批改 // object：更新 if (metaInfo === true) { meta.title = route.meta?.title || '' } else if (metaInfo && metaInfo !== false) { Object.assign(meta, metaInfo) } }) return meta })}<!-- App.vue --><template> <VueMeta /> <div id="nav"> <router-link to="/"> Home </router-link> | <router-link to="/about"> About </router-link> </div> <router-view /></template><script lang="ts">import { Options, Vue } from 'vue-class-component'import VueMeta from '@/global/vue-meta/component'@Options({ components: { VueMeta, },})export default class Home extends Vue {}</script>尚未实现，先放出代码，后续补上解释