导读

在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签

内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致;

所以我们需要对这三个页面单独做一个head,更加方便于SEO优化,搜索引擎的爬取;

好,我们打开index.vue,编辑如下:

head(){
 return {
  title: 'jokes home page',
  meta: [{
  hid: "description",
  name: "description",
  content: "this is funny jokes home page"
  },{
  hid: 'viewport',
  name: 'viewport',
  content: 'width=device-width, initial-scale=1.0'
  }]
 }
 },

我们再次打开jokes.vue,编辑如下:

head(){
 return {
  title: 'jokes page',
  meta: [{
  hid: "description",
  name: "description",
  content: "funny jokes page"
  }]
 }
 },

打开about.vue,编辑如下:

head(){
 return {
  title: 'about page',
  meta: [{
  hid: "page description",
  name: "description",
  content: "funny jokes about page"
  }]
 }
},

每次设置修改之后,我们都需要打开当前页面的源代码查看一下,服务端渲染新head标签内容是否生效。

补充知识:nuxt 为单独的页面或组件 注入js

代码如下

 head() {
 return {
  script: [
  {
   charset: 'utf-8',
   src:'https://map.qq.com/api/js"" src="/UploadFiles/2021-04-02/20201105113656.jpg">

以上这篇nuxt 每个页面head标签内容设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
nuxt,页面head标签

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“nuxt 每个页面head标签内容设置方式”
暂无“nuxt 每个页面head标签内容设置方式”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。