1.(待定)发请求-动态meta标签(可开放图谱协议)
https://github.com/nuxt/nuxt/issues/28566
pages/share.vue
<template>
<h1>share</h1>
</template>
<script setup lang="ts">
import axios from 'axios'
const route = useRoute()
async function getMeta(route){
console.log('id',route.query.id);
const response = await axios.post('https://xxx.com/bot/get.do', `id=${route.query.id}`)
return response.data.name
}
useHead({
title: getMeta(route),
meta: [
{ name: 'description', content: getMeta(route) },
{ name: 'og:title', content: getMeta(route) },
],
})
</script>
pages/[id].vue
<template>
<h1>share</h1>
</template>
<script setup lang="ts">
import axios from 'axios'
const route = useRoute()
async function getMeta(route){
console.log('id',route.params.id);
const response = await axios.post('https://xxx.com/bot/get.do', `id=${route.params.id}`)
return response.data.name
}
useHead({
title: getMeta(route),
meta: [
{ name: 'description', content: getMeta(route) },
{ name: 'og:title', content: getMeta(route) },
],
})
</script>
2.components目录创建的组件, 整个项目无需显式导入
3.页面pages
app.vue中添加<NuxtPage />
pages中index.vue
4.布局layouts
app.vue中添加<NuxtLayout />
layouts中default.vue,将被默认使用