如果我们想要在vue3的单页面上引入js，或者设置title和meta，我们可以使用unhead插件。 unhead插件文档：https://unhead.unjs.io/setup/vue/installation
安装
yarn add @unhead/vue
//或者
npm install @unhead/vue
//或者
pnpm add @unhead/vue
挂在
- vue3
import { createApp } from 'vue'
import { createHead } from '@unhead/vue'
const app = createApp()
const head = createHead()
app.use(head)
app.mount('#app')
- vue2
import Vue from 'vue'
import { createHead } from '@unhead/vue'
import { UnheadPlugin } from '@unhead/vue/vue2'
const head = createHead()
Vue.use(UnheadPlugin)
new Vue({
el: '#app',
unhead: head,
})
使用useHead和useScript
- 方法一
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useHead, useScript } from '@unhead/vue';
//通过useHead函数设置页面的标题
useHead({
title: 'Hello World',
});
//通过useScript函数引入外部脚本，并返回其中的addConfetti函数
const { addConfetti } = useScript({
src: 'https://example.com/script.js',
use: () => {
console.log({ jsconfetti: window.JSConfetti });
return window.JSConfetti;
},
});
//声明window对象中的JSConfetti属性，用于类型检查。
declare module window {
const JSConfetti: any;
}
</script>
<template>
<div>Hello World</div>
</template>
- 方法二
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,
}))],
})
这个方法也行得通，但是不推荐
使用Head组件
unhead包导出了一个<Head>组件，可用于管理头部标签。虽然建议使用useHead组合式函数，因为它提供了更灵活的API并具有完整的TypeScript支持，但<Head>组件可能更适合你的项目。
该组件接受任何你通常放在实际<head>中的子元素，并使用unhead进行渲染。它可以帮助你更方便地管理和渲染头部标签。
<script lang="ts" setup>
import { Head } from '@unhead/vue/components'
</script>
<template>
<Head>
<title>My awesome site</title>
<meta name="description" content="My awesome site description">
</Head>
</template>
标题模版
标题模板允许您以统一的方式呈现页面标题。使用 titleTemplate 键可以为页面标题设置模板。
- 字符串
%s被替换为title
useHead({
titleTemplate: 'My Site - %s',
})
- 一个函数，它有一个可选的标题作为唯一的参数并返回一个字符串
useHead({
titleTemplate: (title?: string) => `${title} - My Site`,
})
- 使用
useHead({ title: "My Page" })
这样网站标题就被渲染成了My Page - My Site
评论(0)