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操作Cookie取值错误的解决方法
Aug 26 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
文档对象模型DOM通俗讲解
2013/11/01 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
JavaScript事件 "事件对象"的注意要点
2016/01/14 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Ubuntu下安装PyV8
2016/03/13 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python如何根据时间序列数据作图
2020/05/12 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
大学拉赞助协议书范文
2014/09/26 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
python微信智能AI机器人实现多种支付方式
2022/04/12 Python