Nuxt页面自定义meta标签和asyncData异步请求
一、页面自定义meta标签
Piconjo_Official
原创文章 249获赞 41访问量 213万+
关注
私信
展开阅读全文
作者：Piconjo_Official
可以为每个页面单独设置不同的meta标签 以便于SEO
全局的meta标签在nuxt.config.js文件里配置
而单独的meta标签在组件的内部标签内进行配置即可
值得注意的是：hid属性是页面的唯一标识 若想要在此配置并覆盖全局的meta 那么hid属性必须为description
因为默认的meta的hid属性就是description
若hid不配置成description 则会有两个meta标签 其中 一个的hid是description(默认的) 另一个的hid是自己配置的
从而产生重复 导致一些问题 因此hid要配置成description 以覆盖默认的meta
export default {
data()
{
return {
title:"测试标题"
}
},
// 为每个页面独立设置head的内容
head()
{
return {
title:this.title,
meta:[
{hid:"description",name:"test1",content:"欢迎访问本网站，本网站提供XXXX服务"}
]
}
}
}
二、asyncData异步请求
Nuxt提供了asyncData()方法 使得能够在渲染组件之前异步获取数据
asyncData方法会在页面组件每次加载之前被调用 可以在服务端或路由更新之前被调用
首先需要一个发送AJAX请求的库 推荐使用Axios
安装：npm i axios -S
Promise语法：
状态码：{{mystatus}}
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}
})
}
}
await语法：
状态码：{{mystatus}}
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}
}
}
Piconjo_Official
原创文章 249获赞 41访问量 213万+
关注
私信
展开阅读全文
作者：Piconjo_Official
