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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
浅析node.js中close事件
Nov 26 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
JavaScript多种图形实现代码实例
Jun 28 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入门速成(2)
2006/10/09 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP面向对象详解(三)
2015/12/07 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
python中的yield使用方法
2014/02/11 Python
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python实现建立SSH连接的方法
2015/06/03 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
护理自荐信
2013/10/22 职场文书
学习交流会主持词
2014/04/01 职场文书
励志演讲稿300字
2014/08/21 职场文书
刑事撤诉申请书
2015/05/18 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
nginx请求限制配置方法
2021/07/09 Servers
python 安全地删除列表元素的方法
2022/03/16 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python