vue3使用vue-meta

安装vue-metanpmi-Svue-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└──views├──About.vue└──Home.vuedevelopment创建一个vue-meta管理器并在应用程序中使用它从'vue'从'./App.vue'导入应用程序从'@/router'导入vueMetaManager从'@/global/vue-meta'constapp=createApp(App)app.use(router).use(vueMetaManager)app.mount('#app')创建一个处理meta//global/vue-meta/components.tsximportrouterfrom'@/router'import{watch}from'@vue/runtime-core'import{选项，设置，Vue}from'vue-class-component'import{SlotScopeProperties,useMeta}from'vue-meta'@Options({render(){constslots={title:({content}:SlotScopeProperties)=>{返回内容？`${内容}|SITE_NAME`:'SITE_NAME'},}//metainfo是一个全局组件，由vue-meta注入//这里不能使用h('metainfo')，无法正确渲染metainfo组件。未知原因return},})exportdefaultclassVueMetaextendsVue{protectedmeta=setup(()=>{const{meta}=useMeta({title:'',})//监听当前路由对象修改元信息watch(router.currentRoute,()=>{constroute=router.currentRoute.valueconstmetaInfo=route.meta?.metaInfo??true//true:使用route.meta.title//false：由页面组件通过useMeta修改//对象：更新if(metaInfo===true){meta.title=route.meta?.title||''}elseif(metaInfo&&metaInfo!==false){Object.assign(meta,metaInfo)}})returnmeta})}将组件放入App.vue对于一些特殊的页面，可以修改页面组件中的元