Vue3 动态设置head插件unhead介绍- 支持标题模板，meta等。vue-meta 替代品

        yarn add @unhead/vue

      

        import { createHead } from '@unhead/vue'
import { createApp } from 'vue'
const app = createApp()
const head = createHead()
app.use(head)
app.mount('#app')

      

        import { createHead, Vue2ProvideUnheadPlugin } from '@unhead/vue'
import Vue from 'vue'

const head = createHead()
Vue.use(Vue2ProvideUnheadPlugin, head)
Vue.use(head)

Vue({
  el: '#app',
})

      

        import { useHead } from '@unhead/vue'

const myPage = ref({ description: 'This is my page' })
const title = ref('title')
const myScript = computed(() => ({
  src: 'https://example.com/script.js',
  defer: true,
}))

useHead({
  // ref (recommended)
  title,
  // computer getter (recommended)
  meta: [{ name: 'description', content: () => myPage.value.description },],
  // computed (not recommended)
  script: [computed(() => ({
    src: 'https://example.com/script.js',
    defer: true,
  }))],
})

      

        useHead({
  titleTemplate: 'My Site - %s',
})

      

        useHead({
  titleTemplate: (title?: string) => `${title} - My Site`,
})

      

        useHead({ title: 'My Page' })

      

        useHead({
  titleTemplate: null,
})

      

        useHead({
  titleTemplate: (title?: string) => !title ? 'Default title' : `${title} - My Site`,
})

      

        let oldtitle: string // 记录旧标题，方便切换回来

function titleTemplate(title?: string) {
  oldtitle = title
  return `${title} - ${useConfig.value?.userInfo?.title}`
}
// 调用原生接口判断是否离开了页面
document.addEventListener('visibilitychange', () => {
  const state = document.visibilityState
  if (state === 'visible') {
    useHead({ title: oldtitle, titleTemplate })
  }
  else if (state === 'hidden') {
    useHead({ title: '啊💔怎么离开了呢💔怎么会?怎么会呢!', titleTemplate: null })
  }
})

useHead({
  titleTemplate,
})