如何在 Vue.js 3 中使用 Vue 3 Meta

Disclaimer: vue-meta v3 is still in alpha!

这是我开始工作所需的最低限度的实现:

1. 将vue-meta更新为v3(在package.json中)

   - "vue-meta": "^2.4.0",
   + "vue-meta": "^3.0.0-alpha.7",
   

   ...或者用Yarn :

   yarn add vue-meta@alpha
   

2. 添加metaManager到Vue应用程序

   import { createMetaManager } from 'vue-meta'
   
   const app = createApp(App)
     .use(router)
     .use(store)
     .use(createMetaManager()) // add this line
   
   await router.isReady()
   app.mount('#app')
   

3. 在应用程序中添加<metainfo>.vue <template>(这也是我设置"标题模板"的地方)

   <template>
     <metainfo>
       <template v-slot:title="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` }}</template>
     </metainfo>
     <header />
     <router-view />
     <footer />
   </template>
   

4. Set default meta in App.vue <script>
   Vue 3 vanilla:

   import { useMeta } from 'vue-meta'
   
   export default {
     setup () {
       useMeta({
         title: '',
         htmlAttrs: { lang: 'en', amp: true }
       })
     }
   }
   

   or with 100:

   import { setup, Vue } from 'vue-class-component'
   import { useMeta } from 'vue-meta'
   
   export default class App extends Vue {
     meta = setup(() => useMeta({
       title: '',
       htmlAttrs: { lang: 'en', amp: true }
     })
   }
   

5. Override meta in each component
   Vue 3 vanilla:

   import { useMeta } from 'vue-meta'
   
   export default {
     setup () {
       useMeta({ title: 'Some Page' })
     }
   }
   

   or with 100:

   import { computed } from '@vue/runtime-core'
   import { setup, Vue } from 'vue-class-component'
   import { useMeta } from 'vue-meta'
   
   export default class SomePage extends Vue {
     meta = setup(() => useMeta(
       computed(() => ({ title: this.something?.field ?? 'Default' })))
     )
   }
   

另见:

• "Quick Usage" (vue-meta next branch)
• Vue Router Example (vue-meta next branch)