nuxt 服务器渲染动态设置 title和seo关键字的操作


Posted in Javascript onNovember 05, 2020

使用如下钩子即可,但是前提条件是 没有默认配置head的title

asyncData ({ app }, callback) {
app.head.title = ‘new title'
callback(null, {})
},

补充知识:vue 每个页面动态切换title keywords description (seo的设置)

最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description

!!!在这里先添加一步:

html文件添加

<meta data-n-head="1" data-hid="description" name="description" content="">

<meta data-n-head="1" data-hid="keywords" name="keywords" content="">

第一步 在router里面index.js文件夹中

routes: [
  {
   path: '/',
   name: 'main',
   component: Main,
   meta: {
    title: '首页title内容',
    content:{
     keywords:'这里是第一个keywords',
     description:'这里是第一个description',
    },
   
   }
  },
  {
   path: '/trueBag',
   name: 'trueBag',
   component: trueBag,
   meta: {
   title: 'trueBag页面的title内容',
    content:{
    keywords:'这里是第二个keywords',
     description:'这里是第二个description',
    },
   }
  },
  ]

第二步 在main.js里面设置,路由发生变化修改页面meta

前提是已经导入了router

// 现在可以直接复制,不需要改什么东西
// 当然如果你想添加的meta,不仅仅只有keywords 和 description的时候,
// 自己可以举一反三 :
// setAttribute 后面就是设置它的值前提是要和router里面的content是相对应的
//要不然是获取不到的
//document.querySelector(‘meta[name=“description”]').setAttribute(‘content', to.meta.content.description)

router.beforeEach((to, from, next) => {
 /* 路由发生变化修改页面meta */
 console.log(to.meta.content)
 if(to.meta.content){
  let head = document.getElementsByTagName('head');
  let meta = document.createElement('meta');
  document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
  document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
  meta.content = to.meta.content;
  head[0].appendChild(meta)
 }
 // /* 路由发生变化修改页面title */
 if (to.meta.title) {
  document.title = to.meta.title;
 }
 next()
});

nuxt 服务器渲染动态设置 title和seo关键字的操作

具体是否成功可以f12查看,如果没有出来,一步一步打印一下,看自己是哪里出错。

以上这篇nuxt 服务器渲染动态设置 title和seo关键字的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
vue多次循环操作示例
Feb 08 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 #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
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
国内php原创论坛
2006/10/09 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python版DDOS攻击脚本
2019/06/12 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
酒店个人培训自我鉴定
2013/12/11 职场文书
七年级历史教学反思
2014/02/05 职场文书
股东授权委托书范文
2014/09/13 职场文书
护士求职自荐信
2015/03/25 职场文书
员工担保书范本
2015/09/22 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书