网站的宣传对于是网站极为重要的一环功能，一个优秀的网站对于seo的需求更是不可缺少的存在。

文中介绍nuxt项目中如何动态设置head里面的参数，实现对网站seo的优化。

一、head参数的设置获取

head() {
  return {
    title: this.headData.title,
    meta: [
      { hid: 'description', name: 'description', content: this.headData.introduct },
      { hid: 'keywords', name: 'keywords', content: this.headData.keyword}
    ],
  }
},
data() {
  return {
	headData:{
	  title:'标题',
	  introduct:'介绍',
	  keyword:'关键字'
	}
  }
}

nuxt提供head参数的设置，这里可以是固定写死，也可以通过后台数据动态填充。

上述代码为动态获取data中的headData数据进行动态赋值。

二、asyncData的配合使用

async asyncData({app, params }) {
  if(params.id){
	const d = await app.$axios.get("/api/art/"+params.id)
	return{
		//将后台反馈值赋值给headData，这样在data中就可以取到数据
		headData:d.data.data
	}
  }else{
	alert("传递参数不能为空")
  }
}

    params：为路由上传递的值。该案例中路由传递了id参数。

如果需要了解在nuxt中如何使用axios和后端数据交互，可以本站搜索“nuxt使用@nuxtjs/axios插件实现前后端数据交互”