nuxt 每个页面head标签内容设置方式


Posted in Javascript onNovember 05, 2020

导读

在前面几节课程中,我们已经完成对首页,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?v=2.exp&key=3',
   body: true
  },
  {
   type: 'text/javascript',
   src: 'https://3gimg.qq.com/lightmap/api_v2/2/4/127/main.js',
   body: true
  },
  {
   type: 'text/javascript',
   src:'https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js',
   body: true
  }
  ]
 }
 },

由于地图 只有在一个页面使用, 没必要全局引入,于是就在单个页面使用

nuxt 每个页面head标签内容设置方式

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

Javascript 相关文章推荐
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 #Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 #Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 #Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 #Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 #Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 #Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
Valerio 发布了 Mootools
2006/09/23 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python的Flask框架与数据库连接的教程
2015/04/20 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python Socket传输文件示例
2017/01/16 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python 深度学习中的4种激活函数
2020/09/18 Python
大学生个人简历自我评价
2013/11/16 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
教师个人自我评价范文
2014/04/13 职场文书
小学感恩主题班会
2015/08/12 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书