一、页面自定义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>