Nuxt页面自定义meta标签和asyncData异步请求

一、页面自定义meta标签

可以为每个页面单独设置不同的meta标签 以便于SEO

全局的meta标签在nuxt.config.js文件里配置
而单独的meta标签在组件的内部<script>标签内进行配置即可

值得注意的是：hid属性是页面的唯一标识 若想要在此配置并覆盖全局的meta 那么hid属性必须为description
因为默认的meta的hid属性就是description
若hid不配置成description 则会有两个meta标签 其中 一个的hid是description(默认的) 另一个的hid是自己配置的
从而产生重复 导致一些问题 因此hid要配置成description 以覆盖默认的meta

<script>
export default {
    data()
    {
        return {
            title:"测试标题"
        }
    },
    // 为每个页面独立设置head的内容
    head()
    {
        return {
            title:this.title,
            meta:[
                {hid:"description",name:"test1",content:"欢迎访问本网站，本网站提供XXXX服务"}
            ]
        }
    }
}
</script>

二、asyncData异步请求

Nuxt提供了asyncData()方法 使得能够在渲染组件之前异步获取数据
asyncData方法会在页面组件每次加载之前被调用 可以在服务端或路由更新之前被调用

首先需要一个发送AJAX请求的库 推荐使用Axios
安装：npm i axios -S

Promise语法：

<template>
    <div>
        <h1>状态码：{{mystatus}}</h1>
    </div>
</template>

<script>
import axios from "axios"

export default {
    data()
    {
        return {
            status:1
        }
    },
    asyncData() {
        return axios.get("www.xxx.com/xxx/xxx")
        .then(result => {
            return {mystatus:result.data.status}
        })
    }
}
</script>

await语法：

<template>
    <div>
        <h1>状态码：{{mystatus}}</h1>
    </div>
</template>

<script>
import axios from "axios"

export default {
    data()
    {
        return {
            status:1
        }
    },
    async asyncData() {
        let {data}=await axios.get("www.xxx.com/xxx/xxx")
        return {mystatus:data.status}
    }
}
</script>

---