nuxt初学

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，将被默认使用