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


一、页面自定义meta标签

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

全局的meta标签在nuxt.config.js文件里配置
而单独的meta标签在组件的内部

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

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

Promise语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>