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 匿名函数及其代码模式原理
Mar 19 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
pm2启动ssr失败的解决方法
Jun 29 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中图片等比缩放的实例
2013/03/24 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
护理学专业推荐信
2013/12/03 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
任命书格式范文
2015/09/22 职场文书