Nuxt页面自定义meta标签和asyncData异步请求_nuxt动态meta - CSDN文库

54 浏览量更新于2023-05-04 收藏 48KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

一、页面自定义一、页面自定义meta标签标签

可以为每个页面单独设置不同的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"

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38506103

粉丝: 13
资源: 941

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈